Vai al contenuto
Numio

Convertitore da GraphQL a componenti React — Numio

Genera codice di recupero dati digitato per ogni operazione nel pannello Documento: hook React Apollo (predefinito), servizi Apollo Angular, componenti Stencil Apollo o hook urql, insieme allo schema TypeScript e ai tipi di operazione.

Ottenere hook useXQuery e useXLazyQuery già pronti per un'app Apollo Client React da una query che hai appena scritto.

GraphQL Schema

Document

Quando usarlo

  • Ottenere hook useXQuery e useXLazyQuery già pronti per un'app Apollo Client React da una query che hai appena scritto.
  • Confrontando come appare la stessa operazione come un servizio iniettabile Apollo Angular o un hook urql prima di scegliere un client.

Come si usa

  1. Incolla lo schema nell'editor dello schema GraphQL e le query, le mutazioni o le sottoscrizioni con nome nell'editor dei documenti.
  2. Scegli il target nel menu a discesa dell'output: TypeScript React Apollo, TypeScript Apollo Angular, TypeScript Stencil Apollo o TypeScript urql.
  3. Copia la costante del documento generato (ad esempio GetUserDocument) e gli hook, i servizi o i componenti nel tuo progetto.

Schema GraphQL + documento

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

Componenti e ganci 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,
  )
}
…

Dettagli e limiti

Ciascuna opzione esegue prima @graphql-codegen/typescript e typescript-operazioni, quindi l'output contiene anche lo schema completo e i tipi di operazione (eliminati sopra).

React Apollo importa gql e gli hook da @apollo/client; urql e Stencil importano gql dal tag graphql; Apollo Angular genera classi @Injectable come GetUserGQL.

Senza un'operazione valida nell'editor dei documenti, non vengono generati hook o componenti; un documento che non corrisponde allo schema viene ignorato con un commento di avviso. La generazione viene eseguita in un browser Web Worker.

FAQ

Perché baseOptions è richiesto in useGetUserQuery?

La query ha una variabile non nulla ($id: ID!), quindi l'hook generato richiede opzioni contenenti variabili. Le query senza variabili obbligatorie ottengono un parametro baseOptions opzionale.

L'output di React Apollo include hook di query pigri?

Sì. Per ogni query genera useXQuery e useXLazyQuery più alias del tipo di risultato come GetUserQueryHookResult e GetUserQueryResult. Le mutazioni ottengono un hook useXMutation.

Posso modificare le opzioni del plugin come withHooks o la fonte di importazione?

No. La pagina esegue ciascun plug-in con la sua configurazione predefinita e offre solo il menu a discesa della destinazione di output.

Specifiche e riferimenti