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

Конвертировать GraphQL в типы Flow — Numio

Генерирует определения типов Flow из GraphQL-схемы и операций с помощью @graphql-codegen/flow и flow-operations. Объектные типы становятся точными объектами Flow ({| |}), а nullable-поля — необязательными maybe-типами (?T).

Добавить типизированные результаты GraphQL в кодовую базу, которая всё ещё проверяется Flow, а не TypeScript.

GraphQL Schema

Document

Flow

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

  • Добавить типизированные результаты GraphQL в кодовую базу, которая всё ещё проверяется Flow, а не TypeScript.
  • Сгенерировать типы переменных и результата для одного запроса, чтобы положить их рядом с компонентом.

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

  1. Вставьте SDL схемы в редактор GraphQL Schema.
  2. Введите используемые операции в редактор Document или очистите его, если нужны только типы схемы.
  3. Скопируйте вывод, начинающийся с // @flow, в .js-файл под Flow.

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 }
}

Типы Flow

// @flow
…
export type User = {|
  __typename?: "User",
  id: $ElementType<Scalars, "ID">,
  name?: ?$ElementType<Scalars, "String">,
  tags: Array<$ElementType<Scalars, "String">>,
|}

export type GetUserQueryVariables = {
  id: $ElementType<Scalars, "ID">,
}

export type GetUserQuery = {
  ...{ __typename?: "Query" },
  ...{|
    user?: ?{
      ...{ __typename?: "User" },
      ...$Pick<User, {| id: *, name?: * |}>,
    },
  |},
}

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

Поля ссылаются на скаляры через $ElementType<Scalars, "ID">; тип Scalars в начале (выше опущен) сопоставляет ID и String со string, а Int и Float — с number.

Типы результатов операций строятся из object spread и локального хелпера $Pick, поэтому в них попадают только выбранные поля.

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

FAQ

Являются ли сгенерированные объектные типы точными?

Да. Объектные типы схемы используют синтаксис точных объектов {| ... |}, поэтому Flow отклоняет лишние свойства.

Как представлены nullable-поля?

Nullable-поле становится необязательным свойством с maybe-типом, например name?: ?$ElementType<Scalars, "String">. Non-null поля обязательны и не являются maybe.

Почему в выводе есть комментарий "Document ignored"?

Операции в редакторе Document проверяются по схеме. Если они не совпадают (пример по умолчанию запрашивает username), генерируются только типы схемы, а первая ошибка выводится комментарием под // @flow. Исправьте документ или очистите его.

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