Автогенерация api для RTK Query, graphql, postgraphile и postgresql

Дисклеймер: код испольуемый в данной статье предназначен исключительно для демонстрационных целей.

Исходный код можно найти здесь

Предусловие:

• имеется GraphQL API сервер. В данном примере, его адрес:
  http://localhost:5001/graphql
  . Он реализован с помощью
  postgraphile
  . Его настройка и запуск описаны ниже.

Клиентское приложение создадим на основе

npm create vite@latest client -- --template react-ts

Для автогенерации api RTK Query предоставляет плагин @graphql-codegen/typescript-rtk-query

Для его использования нам понадобится еще несколько пакетов. Для этого в директории нашего клиентского приложения выполним:

npm i -D @graphql-codegen/cli \
@graphql-codegen/introspection \
@graphql-codegen/near-operation-file-preset \
@graphql-codegen/typescript-rtk-query \
@rtk-query/graphql-request-base-query

В разделе

    "graphql-codegen": "graphql-codegen --config codegen.yml"

Теперь в корне директории нашего клиентского приложения добавим файл настроек для автогенерации

После этого нужно проверить наличие в директории

src/features/todos
├── createTodo.graphql
├── deleteTodo.graphql
├── getTodos.graphql
└── updateTodoById.graphql

Также следует убедиться, что сервер работает и находится по адресу, указанному в конфигурации. Создадим файл

В папке

После этого выполним:

npm run graphql-codegen

Вывод команды при успешном выполнении:

> client@0.0.0 graphql-codegen
> graphql-codegen --config codegen.yml

✔ Parse Configuration
✔ Generate outputs

В результате выполнения должны сгенерироваться следующие файлы:

src
├── app
│   └── services
│       └── types.generated.ts
└── features
    └── todos
        ├── createTodo.generated.ts
        ├── deleteTodo.generated.ts
        ├── getTodos.generated.ts
        └──updateTodoById.generated.ts

Пример использования можно посмотреть здесь

Для этого в директории проекта выполните:

docker-compose up -d

А затем в директории

npm run dev