Urql-svelte没有正确添加查询参数

Question

使用urql初始化查询时出现此错误

[GraphqlQL]必须提供查询

我检查了网络选项卡中的有效负载，看起来urql从请求有效负载中删除了查询关键字，这就是它在网络选项卡中看起来的样子：

query:  {n  categories {n    namen    idn    __typenamen  }n}

这是我在svelte文件中的查询，它是从文档中复制的，正是

const categories = operationStore(`
query {
categories{
name
id
}
}
`)

这是在graphicql中生成的有效负载query: "query{n categories{n idn namen }n}"

任何帮助都将不胜感激，提前感谢

Answer 1

您需要使用urql:提供的gql功能来预处理查询

import { gql } from '@urql/svelte';
const categories = operationStore(gql`
query {
categories {
name
id
}
}
`);

如果您的查询开始变得更加复杂，或者如果您开始处理多个不同的查询，我建议将它们放在各自独立的文件中($lib/queries.js是一个很好的位置(，例如在您的情况下：

// $lib/queries.js
import { gql } from '@urql/svelte';
export const GET_CATEGORIES = gql`
query {
categories {
name
id
}
}
`;
// in your component:
import { GET_CATEGORIES } from '$lib/queries';
const categories = operationStore(GET_CATEGORIES);