Urql svelte 未正确添加查询参数

发布于 2025-01-09 22:07:02 字数 513 浏览 0 评论 0原文

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

[GraphqlQL]必须提供查询

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

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

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

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

这就是 graphiql 中生成的有效负载 查询：“查询{\n类别{\n id\n名称\n}\n}”

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

原文

I get this error when initializing a query with urql

[GraphqlQL] must provide query

I checked the payload in the network tab and it looks like urql removed the query keyword from the request payload this is how it looks like in the network tab:

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

This is my query in the svelte file, it's copied from the documentation exactly

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

this is the payload generated in graphiql
query: "query{\n categories{\n id\n name\n }\n}"

any help would be greatly appreciated thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷了相思 2025-01-16 22:07:02

您需要使用 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);

You need to preprocess queries using the gql facility provided by urql:

import { gql } from '@urql/svelte';

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

If your queries start becoming more complex, or if you start handling multiple different queries, I recommend putting them in their own separate file(s) ($lib/queries.js is as good a place as any), for example in your case:

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

回复收藏 0 原文

~没有更多了~