Aller au contenu
Numio

Convertir GraphQL en types TypeScript — Numio

Génère des types TypeScript à partir d'un schéma GraphQL avec @graphql-codegen/typescript, ainsi que les types de résultat et de variables des opérations du panneau Document. Les champs nullable deviennent des propriétés Maybe<T> facultatives ; les listes non nulles deviennent Array<T>.

Typer les données renvoyées par une query dans un frontend sans configurer de codegen.yml ni lancer la CLI.

GraphQL Schema

Document

TypeScript

Quand l’utiliser

  • Typer les données renvoyées par une query dans un frontend sans configurer de codegen.yml ni lancer la CLI.
  • Vérifier l'effet d'une modification du schéma (un champ qui devient nullable, une nouvelle valeur d'enum) sur le TypeScript généré avant de la committer.

Mode d’emploi

  1. Collez votre SDL (définitions type, enum, interface, union, scalar) dans l'éditeur GraphQL Schema.
  2. Placez des queries, mutations ou fragments dans l'éditeur Document, ou videz-le pour n'obtenir que les types du schéma ; un document qui ne correspond pas au schéma est ignoré avec un commentaire d'avertissement.
  3. Copiez les types générés : les types du schéma comme User, plus GetUserQuery et GetUserQueryVariables pour chaque opération nommée.

Schéma 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 }
}

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

Détails et limites

La sortie commence par des types utilitaires fixes (Maybe, InputMaybe, Exact, MakeOptional, Scalars, …), abrégés en '…' ci-dessus. Scalars associe à chaque scalaire des types d'entrée et de sortie distincts.

Les scalaires personnalisés comme Date sont typés any ; les valeurs d'enum deviennent un enum TypeScript avec des clés en PascalCase (USER devient User = "USER").

La génération s'exécute dans un Web Worker de votre navigateur ; rien n'est envoyé. Le résultat est formaté avec Prettier sans points-virgules, et la page n'a aucune option de configuration codegen.

FAQ

Pourquoi la sortie commence-t-elle par "// Document ignored" ?

L'éditeur Document est validé par rapport à votre schéma, et son exemple par défaut interroge des champs comme username. Quand la validation échoue, la page génère quand même les types du schéma et place la première erreur dans un commentaire en tête. Corrigez les opérations ou videz l'éditeur Document.

Comment les champs nullable sont-ils typés ?

Un champ nullable comme name: String devient name?: Maybe<Scalars["String"]["output"]>, où Maybe<T> vaut T | null. Dans les types de résultat des opérations, il est écrit en ligne sous la forme name?: string | null.

Seuls les champs sélectionnés figurent-ils dans le type de la query ?

Oui. GetUserQuery ne contient que les champs sélectionnés par la query (ici id et name), avec __typename en propriété facultative, tandis que le type User complet est généré séparément.

Spécifications et références