Автоматическая генерация кодов из GraphQL в TypeScript является важным шагом в поддержании целостности и безопасного типа в frontend-приложениях. GraphQL предоставляет типизированную схему, но эта информация о типах находится на сервере, и frontend-приложение не имеет информации о типах на этапе компиляции, если только вы не пишете соответствующие интерфейсы вручную.
Зачем Нужна Безопасность Типов для GraphQL
GraphQL уже дает вам типизированную схему, но проблема заключается в том, что эта информация о типах живет на сервере. Ваше frontend-приложение на TypeScript не имеет информации о типах на этапе компиляции, если только вы не пишете соответствующие интерфейсы вручную. Ручное написание интерфейсов имеет три режима отказа:
- Интерфейсы устаревают: бэкенд добавляет поле или меняет тип, а ваш интерфейс остается прежним. Ошибка появляется на этапе выполнения.
- Интерфейсы являются неполными: разработчики пропускают необязательные поля или используют тип "any", чтобы сэкономить время. Вы теряете преимущества TypeScript.
- Интерфейсы дублируются: один и тот же запрос используется в трех компонентах, каждый из которых имеет свою собственную интерфейсную реализацию.
Автоматическая генерация кодов решает все эти проблемы. Интерфейсы получаются непосредственно из схемы и файлов .graphql, генерируются свежими на каждом этапе сборки и используются во всем проекте.
Настройка @graphql-codegen
Установите зависимости, используя npm:
npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-query
Если вы используете Apollo Client вместо React Query, замените последний пакет:
npm install -D @graphql-codegen/typescript-react-apollo
Создайте файл конфигурации codegen.ts в корне вашего проекта:
import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
schema: 'http://localhost:4000/graphql',
// Здесь вы можете указать другие настройки
};
export default config;
Генерация Кодов
Теперь вы можете сгенерировать коды, используя команду:
npx graphql-codegen --config codegen.ts
Эта команда сгенерирует TypeScript-интерфейсы и типы на основе вашей GraphQL-схемы и операций.
Преимущества Автоматической Генерации Кодов
Автоматическая генерация кодов из GraphQL в TypeScript имеет несколько преимуществ:
- Безопасность типов: автоматическая генерация кодов гарантирует, что ваши frontend-приложения имеют точные и актуальные интерфейсы и типы.
- Экономия времени: вам не нужно тратить время на ручное написание интерфейсов и типов.
- Снижение количества ошибок: автоматическая генерация кодов снижает вероятность ошибок и багов в вашем frontend-приложении.
В заключение, автоматическая генерация кодов из GraphQL в TypeScript является важным шагом в поддержании целостности и безопасности типа в frontend-приложениях. Используя @graphql-codegen, вы можете сгенерировать точные и актуальные интерфейсы и типы на основе вашей GraphQL-схемы и операций, экономя время и снижая количество ошибок.