0Pricing
TypeScript Academy · Урок

Типизированный клиент GraphQL с Apollo и urql

Используйте сгенерированные хуки и операции для типобезопасных запросов

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

Проблема типизации клиента

Клиенты GraphQL, такие как Apollo и urql, по умолчанию возвращают данные типа any. Генерация кода создает типизированные хуки и операции, делающие запросы полностью типобезопасными.

// Without codegen: data is any
const { data } = useQuery(GET_USER);
data.user; // any — no safety

Плагин операций для Apollo

Добавьте @graphql-codegen/typescript-react-apollo, чтобы сгенерировать типизированные хуки React для каждой операции в файлах .graphql.

npm install --save-dev @graphql-codegen/typescript-operations
npm install --save-dev @graphql-codegen/typescript-react-apollo

codegen.yml для хуков Apollo

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

# codegen.yml
documents: "src/**/*.graphql"
generates:
  src/generated/operations.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo

Написание типизированного запроса

Запишите операцию GraphQL в файл .graphql и используйте сгенерированный хук в компоненте.

# src/queries/GetUser.graphql
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

Использование сгенерированного хука

Импортируйте сгенерированный хук с полной типизацией: переменные, данные, состояние загрузки и ошибки безопасны с точки зрения TypeScript.

import { useGetUserQuery } from "./generated/operations";

function UserCard({ id }: { id: string }) {
  const { data, loading } = useGetUserQuery({ variables: { id } });
  if (loading) return <p>Loading...</p>;
  return <p>{data?.user?.name}</p>; // data.user: User | null — typed
}

urql с генерацией кода

Для urql используйте @graphql-codegen/typescript-urql, чтобы сгенерировать обёртки типизированных хуков.

npm install --save-dev @graphql-codegen/typescript-urql
# Similar codegen.yml configuration, generates useGetUserQuery for urql

TypedDocumentNode

Подход на самом низком уровне: используйте TypedDocumentNode из @graphql-typed-document-node/core, чтобы прикреплять типы к узлам документов без хуков, специфичных для фреймворка.

import { TypedDocumentNode } from "@graphql-typed-document-node/core";
const GetUserDoc: TypedDocumentNode<GetUserQuery, GetUserQueryVariables> = gql`...`;
// Works with Apollo, urql, and any GraphQL client that supports it

Типы фрагментов

Генерация кода также создаёт типы для фрагментов GraphQL, обеспечивая типобезопасную композицию фрагментов в компонентах.

# UserFields.graphql
fragment UserFields on User {
  id
  name
}
# Generated: UserFieldsFragment type — use as prop type

Типизированные мутации

Генерация кода также создаёт типизированные хуки мутаций с типизированными переменными и данными результата.

import { useCreateUserMutation } from "./generated/operations";

const [createUser, { loading }] = useCreateUserMutation();
// createUser({ variables: { input: { name, email } } })
// — variables are fully typed

Синхронизация операций

При изменении схемы повторно запустите генерацию кода. Добавление шага validate-queries позволяет обнаружить операции, использующие удалённые или переименованные поля.

npx graphql-codegen --check
# or with graphql-inspector:
npx graphql-inspector validate ./src/**/*.graphql ./api/schema.graphql

Итоги: типизированные клиенты GraphQL

Генерация кода создаёт типизированные хуки для Apollo и urql на основе файлов операций .graphql. Это обеспечивает полную типобезопасность переменных, данных запросов и структуры фрагментов — вручную поддерживать типы не требуется.

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

Что даёт сгенерированный типизированный хук GraphQL по сравнению с использованием необработанного документа?

Чему Вы научились

Типизированные клиенты GraphQL используют генерацию кода для создания хуков с полностью типизированными переменными и данными для Apollo и urql. Записывайте операции в файлах .graphql, запускайте генерацию кода и получайте сквозную типобезопасность от схемы до компонента.

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

Урок «Типизированный клиент GraphQL с Apollo и urql» бесплатный?

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

Чему я научусь в уроке «Типизированный клиент GraphQL с Apollo и urql»?

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

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

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

Сколько времени занимает урок «Типизированный клиент GraphQL с Apollo и urql»?

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

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

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

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

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