Naar de inhoud
Numio

GraphQL naar React-componenten omzetten — Numio

Genereert getypte code voor het ophalen van gegevens voor elke bewerking in het documentpaneel: React Apollo-hooks (standaard), Apollo Angular-services, stencil Apollo-componenten of urql-hooks, samen met het TypeScript-schema en de bewerkingstypen.

Kant-en-klare useXQuery- en useXLazyQuery-hooks maken voor een Apollo Client React-app op basis van een query die u zojuist hebt geschreven.

GraphQL Schema

Document

Wanneer gebruik je dit?

  • Kant-en-klare useXQuery- en useXLazyQuery-hooks maken voor een Apollo Client React-app op basis van een query die u zojuist hebt geschreven.
  • Vergelijken hoe dezelfde operatie eruit ziet als een Apollo Angular injecteerbare service of een urql-haak voordat u een klant kiest.

Hoe werkt het

  1. Plak het schema in de GraphQL Schema-editor en uw benoemde queries, mutaties of abonnementen in de Document-editor.
  2. Kies het doel in de vervolgkeuzelijst met uitvoer: TypeScript React Apollo, TypeScript Apollo Angular, TypeScript stencil Apollo of TypeScript urql.
  3. Kopieer de gegenereerde documentconstante (bijvoorbeeld GetUserDocument) en de hooks, services of componenten naar uw project.

GraphQL-schema + 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 }
}

TypeScript componenten en haken

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

Details en beperkingen

Elke optie voert eerst @graphql-codegen/typescript en typescript-operations uit, dus de uitvoer bevat ook het volledige schema en de bewerkingstypen (hierboven weggelaten).

React Apollo importeert gql en de hooks van @apollo/client; urql en stencil importeren gql uit graphql-tag; Apollo Angular genereert @Injectable-klassen zoals GetUserGQL.

Zonder een geldige bewerking in de Documenteditor worden er geen hooks of componenten gegenereerd; een document dat niet overeenkomt met het schema wordt overgeslagen met een waarschuwingsopmerking. Generatie draait in een browser Web Worker.

FAQ

Waarom is baseOptions vereist in useGetUserQuery?

De query heeft een niet-null variabele ($id: ID!), dus de gegenereerde hook vereist opties die variabelen bevatten. Query's zonder vereiste variabelen krijgen een optionele parameter baseOptions.

Bevat de React Apollo-uitvoer luie query-hooks?

Ja. Voor elke zoekopdracht genereert het useXQuery en useXLazyQuery plus aliassen van het resultaattype, zoals GetUserQueryHookResult en GetUserQueryResult. Mutaties krijgen een useXMutation-haak.

Kan ik plug-inopties zoals withHooks of de importbron wijzigen?

Nee. De pagina voert elke plug-in uit met de standaardconfiguratie en biedt alleen de vervolgkeuzelijst voor uitvoerdoelen.

Specificaties en referenties