Перейти к содержимому
Numio

Конвертировать GraphQL в определения TypeScript — Numio

Генерирует TypeScript-типы из GraphQL-схемы с помощью @graphql-codegen/typescript, а также типы результатов и переменных для всех операций в панели Document. Nullable-поля становятся необязательными свойствами Maybe<T>, non-null списки — Array<T>.

Типизировать данные, возвращаемые запросом во фронтенде, без настройки codegen.yml и запуска CLI.

GraphQL Schema

Document

TypeScript

Когда пригодится

  • Типизировать данные, возвращаемые запросом во фронтенде, без настройки codegen.yml и запуска CLI.
  • Проверить, как изменение схемы (поле становится nullable, новое значение enum) будет выглядеть в сгенерированном TypeScript, до коммита.

Как пользоваться

  1. Вставьте свой SDL (определения type, enum, interface, union, scalar) в редактор GraphQL Schema.
  2. Поместите queries, mutations или fragments в редактор Document или очистите его, чтобы получить только типы схемы; документ, не соответствующий схеме, пропускается с комментарием-предупреждением.
  3. Скопируйте сгенерированные типы: типы схемы, например User, а также GetUserQuery и GetUserQueryVariables для каждой именованной операции.

GraphQL-схема + document

# GraphQL Schema editor
type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  name: String
  tags: [String!]!
}

# Document editor
query GetUser($id: ID!) {
  user(id: $id) { id name }
}

Типы TypeScript

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

export type QueryUserArgs = {
  id: Scalars["ID"]["input"]
}

export type User = {
  __typename?: "User"
  id: Scalars["ID"]["output"]
  name?: Maybe<Scalars["String"]["output"]>
  tags: Array<Scalars["String"]["output"]>
}

export type GetUserQueryVariables = Exact<{
  id: Scalars["ID"]["input"]
}>

export type GetUserQuery = {
  __typename?: "Query"
  user?: { __typename?: "User"; id: string; name?: string | null } | null
}

Подробности и ограничения

Вывод начинается с фиксированных вспомогательных типов (Maybe, InputMaybe, Exact, MakeOptional, Scalars, …), выше сокращённых до '…'. Scalars сопоставляет каждый скаляр с отдельными типами input и output.

Пользовательские скаляры, например Date, типизируются как any; значения enum становятся TypeScript enum с ключами в PascalCase (USER становится User = "USER").

Генерация выполняется в Web Worker в браузере; ничего не загружается на сервер. Результат форматируется Prettier без точек с запятой, опций конфигурации codegen на странице нет.

FAQ

Почему вывод начинается с "// Document ignored"?

Редактор Document проверяется по вашей схеме, а пример по умолчанию запрашивает поля вроде username. Если проверка не проходит, страница всё равно генерирует типы схемы и помещает первую ошибку в комментарий в начале. Исправьте операции или очистите редактор Document.

Как типизируются nullable-поля?

Nullable-поле, например name: String, становится name?: Maybe<Scalars["String"]["output"]>, где Maybe<T> — это T | null. В типах результатов операций оно записывается inline как name?: string | null.

Включаются ли в тип запроса только выбранные поля?

Да. GetUserQuery содержит только поля, выбранные запросом (здесь id и name), с __typename как необязательным свойством, а полный тип User генерируется отдельно.

Спецификации и справка