Используйте RTK-запрос с Graphql

Question

Пока я понимаю, что мне нужно создать свою собственную. Я мог бы написать запросы и мутации graphql, как в примере здесь https://rtk-query-docs.netlify.app/examples/react-with-graphql, получу ли я полную безопасность типов для запросов и мутаций, если я добавлю типы в query.builder как это builder.query<Device, void>или я должен использовать что-то вроде этого . В последнем случае как мой baseQuery посмотрите, использую ли я сгенерированный хук для библиотеки graphql-request.

Вот пример крючка из https://www.graphql-code-generator.com/docs/plugins/typescript-graphql-request#simple-request-middleware2 :

      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://github.com/phryneas/graphql-code-generator/blob/5f9a2eefd81538782b791e0cc5df633935164a89/dev-test/githunt/types.rtk-query.ts#L406-L427

Для этого вам потребуется создать api с baseQuery, используя любую библиотеку graphql, подобную этой .

Конфигурация будет выглядеть следующим образом

        ./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 хоть.

Для более простого подхода без генерации кода вы можете посмотреть этот пример или для более продвинутой настройки (но также без полной генерации кода, более интегрированной с существующими инструментами) вы можете посмотреть этот PR