Convertir GraphQL en types Flow — Numio

Quand l’utiliser

• Ajouter des résultats GraphQL typés à une base de code qui vérifie encore ses types avec Flow plutôt qu'avec TypeScript.
• Générer les types de variables et de résultat d'une seule query pour les coller à côté d'un composant.

Mode d’emploi

1. Collez le SDL du schéma dans l'éditeur GraphQL Schema.
2. Saisissez dans l'éditeur Document les opérations que vous utilisez, ou videz-le si vous n'avez besoin que des types du schéma.
3. Copiez la sortie, qui commence par // @flow, dans un fichier .js sous Flow.

# 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
…
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?: * |}>,
    },
  |},
}

Détails et limites

Les champs référencent les scalaires via $ElementType<Scalars, "ID"> ; le type Scalars en tête (omis ci-dessus) associe ID et String à string, Int et Float à number.

Les types de résultat des opérations sont construits avec des spreads d'objet et un helper local $Pick, de sorte que seuls les champs sélectionnés apparaissent.

La génération s'exécute dans un Web Worker de votre navigateur et le résultat est formaté avec Prettier ; la page ne propose aucune option de plugin.

FAQ

Outils associés

Spécifications et références

• GraphQL Code Generator: flow plugin