Aller au contenu
Numio

Générer des composants React à partir de GraphQL — Numio

Génère du code typé de récupération de données pour chaque opération du panneau Document : hooks React Apollo (par défaut), services Apollo Angular, composants Stencil Apollo ou hooks urql, accompagnés des types TypeScript du schéma et des opérations.

Obtenir des hooks useXQuery et useXLazyQuery prêts à l'emploi pour une application React avec Apollo Client à partir d'une query que vous venez d'écrire.

GraphQL Schema

Document

Quand l’utiliser

  • Obtenir des hooks useXQuery et useXLazyQuery prêts à l'emploi pour une application React avec Apollo Client à partir d'une query que vous venez d'écrire.
  • Comparer à quoi ressemble la même opération sous forme de service injectable Apollo Angular ou de hook urql avant de choisir un client.

Mode d’emploi

  1. Collez le schéma dans l'éditeur GraphQL Schema et vos queries, mutations ou subscriptions nommées dans l'éditeur Document.
  2. Choisissez la cible dans la liste de sortie : TypeScript React Apollo, TypeScript Apollo Angular, TypeScript Stencil Apollo ou TypeScript urql.
  3. Copiez dans votre projet la constante de document générée (par exemple GetUserDocument) ainsi que les hooks, services ou composants.

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

Composants et hooks TypeScript

import { gql } from "@apollo/client"
import * as Apollo from "@apollo/client"
…
export const GetUserDocument = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
`
…
export function useGetUserQuery(
  baseOptions: Apollo.QueryHookOptions<GetUserQuery, GetUserQueryVariables>,
) {
  const options = { ...defaultOptions, ...baseOptions }
  return Apollo.useQuery<GetUserQuery, GetUserQueryVariables>(
    GetUserDocument,
    options,
  )
}
…

Détails et limites

Chaque option exécute d'abord @graphql-codegen/typescript et typescript-operations ; la sortie contient donc aussi les types complets du schéma et des opérations (omis ci-dessus).

React Apollo importe gql et les hooks depuis @apollo/client ; urql et Stencil importent gql depuis graphql-tag ; Apollo Angular génère des classes @Injectable comme GetUserGQL.

Sans opération valide dans l'éditeur Document, aucun hook ni composant n'est généré ; un document qui ne correspond pas au schéma est ignoré avec un commentaire d'avertissement. La génération s'exécute dans un Web Worker du navigateur.

FAQ

Pourquoi baseOptions est-il obligatoire dans useGetUserQuery ?

La query a une variable non nulle ($id: ID!), donc le hook généré exige des options contenant variables. Les queries sans variable obligatoire reçoivent un paramètre baseOptions facultatif.

La sortie React Apollo inclut-elle des hooks de lazy query ?

Oui. Pour chaque query, elle génère useXQuery et useXLazyQuery ainsi que des alias de types de résultat comme GetUserQueryHookResult et GetUserQueryResult. Les mutations reçoivent un hook useXMutation.

Puis-je modifier des options du plugin comme withHooks ou la source des imports ?

Non. La page exécute chaque plugin avec sa configuration par défaut et ne propose que la liste de la cible de sortie.

Spécifications et références