graphql - Urql svelte 未正确添加查询参数

Question

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

[GraphqlQL] 必须提供查询

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

query:  {\n  categories {\n    name\n    id\n    __typename\n  }\n}

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

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

这是在 graphiql 中生成的有效负载 query: "query{\n categories{\n id\n name\n }\n}"

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

Answer 1

您需要使用gqlurql 提供的工具来预处理查询：

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);