通过 Graphql 使用 RTK 查询

Question

到目前为止，我知道我需要构建自己的 baseQuery。我可以像这里的示例一样编写 graphql 查询和变更 https://rtk-query-docs.netlify.app/examples/react-with-graphql, will I get full type safety for queries and mutations if I add types to query.builder like this builder.query<Device, void> or I must use something like this https://www.graphql-code-generator.com/docs/plugins/typescript-graphql-request#simple-request-middleware。在后一种情况下，如果我为 graphql-request 库使用生成的钩子，我的 baseQuery 应该如何看待。

这是来自 2 的钩子示例：

import { GraphQLClient } from 'graphql-request';
import { getSdk } from './sdk'; // THIS FILE IS THE GENERATED FILE
async function main() {
  const client = new GraphQLClient('https://countries.trevorblades.com/');
  const sdk = getSdk(client);
  const { continents } = await sdk.continents(); // This is fully typed, based on the query
  console.log(`GraphQL data:`, continents);
}

我在想：

    import {getSdk} from './sdk'
    const client = new GraphQLClient('https://countries.trevorblades.com/');
    const graphqlBaseQuery = (someGeneratedQueryOrMutation, client) => {
      const something = someGeneratedQueryOrMutation(client);
      const { continents } = await something.continents();
      return { data: continents };
    };

代码并没有真正的意义，但我希望你明白我要说的是什么。谢谢:)

Answer 1

编辑：现在 https://www.graphql-code-generator.com/docs/plugins/typescript-rtk-query

上有一个 Grahql Codegen 插件可用

其实我几天前就开始写代码生成器的插件了。你可以在这里看到生成的结果： https://github.com/phryneas/graphql-code-generator/blob/5f9a2eefd81538782b791e0cc5df633935164a89/dev-test/githunt/types.rtk-query.ts#L406-L427

这需要您使用您选择的 graphql 库创建一个 api 和 baseQuery like this。

一个configuration would look like this

  ./dev-test/githunt/types.rtk-query.ts:
    schema: ./dev-test/githunt/schema.json
    documents: ./dev-test/githunt/**/*.graphql
    plugins:
      - typescript
      - typescript-operations
      - typescript-rtk-query
    config:
      importBaseApiFrom: '../../packages/plugins/typescript/rtk-query/tests/baseApi'
      exportHooks: true

而且我认为出于拆分目的，它也适用于 near-operation-file 预设。

所有这些都还没有上游 - 我将在本周末尝试将其准备好，但不知道实际需要多少时间才能完成。

你可以检查回购协议，做一个本地构建并用类似 yalc 的东西安装它。

对于没有代码生成的更基本的方法，您可以查看 this example or for an a bit more advanced setup (but also without full code generation, more integrated with existing tooling) you could look at this PR

通过 Graphql 使用 RTK 查询

Use RTK Query with Graphql

graphql-codegen

rtk-query