Saltar al contenido
Numio

Generar componentes React desde GraphQL — Numio

Genera código tipado de obtención de datos para cada operación del panel Document: hooks de React Apollo (por defecto), servicios de Apollo Angular, componentes de Stencil Apollo o hooks de urql, junto con los tipos TypeScript del esquema y de las operaciones.

Obtener hooks useXQuery y useXLazyQuery listos para usar en una app React con Apollo Client a partir de una query que acabas de escribir.

GraphQL Schema

Document

Cuándo usarla

  • Obtener hooks useXQuery y useXLazyQuery listos para usar en una app React con Apollo Client a partir de una query que acabas de escribir.
  • Comparar cómo queda la misma operación como servicio inyectable de Apollo Angular o como hook de urql antes de elegir cliente.

Cómo usarla

  1. Pega el esquema en el editor GraphQL Schema y tus queries, mutations o subscriptions con nombre en el editor Document.
  2. Elige el destino en el desplegable de salida: TypeScript React Apollo, TypeScript Apollo Angular, TypeScript Stencil Apollo o TypeScript urql.
  3. Copia en tu proyecto la constante de documento generada (por ejemplo GetUserDocument) y los hooks, servicios o componentes.

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

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

Detalles y limitaciones

Cada opción ejecuta primero @graphql-codegen/typescript y typescript-operations, así que la salida también contiene los tipos completos del esquema y de las operaciones (omitidos arriba).

React Apollo importa gql y los hooks desde @apollo/client; urql y Stencil importan gql desde graphql-tag; Apollo Angular genera clases @Injectable como GetUserGQL.

Sin una operación válida en el editor Document no se generan hooks ni componentes; un documento que no coincide con el esquema se omite con un comentario de aviso. La generación se ejecuta en un Web Worker del navegador.

FAQ

¿Por qué baseOptions es obligatorio en useGetUserQuery?

La query tiene una variable no nula ($id: ID!), así que el hook generado exige opciones que contengan variables. Las queries sin variables obligatorias reciben un parámetro baseOptions opcional.

¿La salida de React Apollo incluye hooks de lazy query?

Sí. Para cada query genera useXQuery y useXLazyQuery, además de alias de tipos de resultado como GetUserQueryHookResult y GetUserQueryResult. Las mutations reciben un hook useXMutation.

¿Puedo cambiar opciones del plugin como withHooks o el origen de los imports?

No. La página ejecuta cada plugin con su configuración por defecto y solo ofrece el desplegable de destino de salida.

Especificaciones y referencias