Блог

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

Вот пример крючка из 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 };
    };
 

Код на самом деле не имеет смысла, но я надеюсь, вы понимаете, к чему я клоню. Спасибо 🙂

Редактировать: К настоящему времени плагин Grahql Codegen доступен по адресу https://www.graphql-code-generator.com/docs/plugins/typescript-rtk-query

На самом деле я начал писать плагин для генератора кода несколько дней назад. Вы можете увидеть полученный результат здесь: https://github.com/phryneas/graphql-code-generator/blob/5f9a2eefd81538782b791e0cc5df633935164a89/dev-test/githunt/types.rtk-query.ts#L406-L427

Для этого вам потребуется создать api с базовым запросом, используя библиотеку 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