0Pricing
TypeScript Academy · Урок

Схема GraphQL в типы TypeScript

Создавайте типы из файлов .graphql с помощью генерации кода

«Схема GraphQL в типы TypeScript» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Проблема: рассинхронизация схемы и типов

В проектах GraphQL схема сервера и типы TypeScript клиента легко рассинхронизируются без автоматизации. Генерация кода решает эту проблему, создавая типы непосредственно из схемы.

# Without codegen: manual types that drift from schema
interface User { id: string; name: string; } // may not match schema

Генератор кода GraphQL

@graphql-codegen/cli читает вашу схему GraphQL и автоматически создает типы TypeScript.

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript

Конфигурация codegen.yml

Настройте источник схемы и расположение вывода в codegen.yml.

# codegen.yml
schema: "./api/schema.graphql"
generates:
  src/generated/types.ts:
    plugins:
      - typescript

Запуск генератора

Запустите graphql-codegen, чтобы создать типы TypeScript из вашей схемы.

npx graphql-codegen
# Generates src/generated/types.ts with all schema types

Пример созданного вывода

Созданный файл содержит интерфейсы TypeScript, соответствующие каждому типу GraphQL в вашей схеме.

// src/generated/types.ts (generated)
export type User = {
  __typename?: "User";
  id: string;
  name: string;
  email: string;
};

export type Query = {
  __typename?: "Query";
  user?: Maybe<User>;
};

Схема с удаленной конечной точки

Генератор кода также может получить схему с работающей конечной точки GraphQL с помощью интроспекции.

# codegen.yml with remote schema
schema:
  - https://api.example.com/graphql:
      headers:
        Authorization: "Bearer ${AUTH_TOKEN}"

Сопоставление скалярных типов

Сопоставьте пользовательские скалярные типы GraphQL с типами TypeScript в конфигурации генерации кода.

# codegen.yml
config:
  scalars:
    DateTime: string
    JSON: Record<string, unknown>
    Upload: File

Обработка перечислений

Перечисления GraphQL сопоставляются со строковыми перечислениями или объединениями TypeScript в зависимости от конфигурации генерации кода.

# Generated from GraphQL enum Role { ADMIN USER GUEST }
export enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

Необязательные значения и Maybe

Поля GraphQL, допускающие значение null, в созданных типах становятся Maybe (то есть T | null | undefined), отражая возможность отсутствия значения, заданную схемой.

// GraphQL: name: String (nullable)
// Generated: name?: Maybe<string>

// GraphQL: id: ID! (non-null)
// Generated: id: string

Интеграция с CI

Запускайте генерацию кода в CI, чтобы проверять актуальность созданных типов. Завершайте сборку с ошибкой, если схема изменилась без повторной генерации.

# CI: check no drift
npx graphql-codegen --check
# Exits 1 if generated files are out of date

Повторение: от схемы к типам

Генератор кода GraphQL читает вашу схему и автоматически создает типы TypeScript. Настройте его с помощью codegen.yml, запустите graphql-codegen и интегрируйте его в CI, чтобы предотвращать рассинхронизацию схемы и типов.

Быстрая проверка

Каково основное назначение генератора кода GraphQL?

Что вы узнали

Генератор кода GraphQL устраняет рассинхронизацию схемы и типов, создавая TypeScript из вашей схемы. Настройте его с помощью codegen.yml, сопоставьте пользовательские скалярные типы и интегрируйте генерацию в CI, чтобы поддерживать актуальность.

Часто задаваемые вопросы

Урок «Схема GraphQL в типы TypeScript» бесплатный?

Да — полный текст урока «Схема GraphQL в типы TypeScript» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Схема GraphQL в типы TypeScript»?

Создавайте типы из файлов .graphql с помощью генерации кода Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Схема GraphQL в типы TypeScript»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Схема GraphQL в типы TypeScript
  2. Типизированные резолверы с GraphQL Code Generator
  3. Типизированный клиент GraphQL с Apollo и urql
  4. Сквозная безопасность типов: процесс от схемы
← Назад к TypeScript Academy