Gerar componentes React a partir de GraphQL — Numio

Quando usar

• Obter hooks useXQuery e useXLazyQuery prontos para um app React com Apollo Client a partir de uma query que você acabou de escrever.
• Comparar como a mesma operação fica como serviço injetável do Apollo Angular ou como hook do urql antes de escolher o cliente.

Como usar

1. Cole o schema no editor GraphQL Schema e suas queries, mutations ou subscriptions nomeadas no editor Document.
2. Escolha o destino no menu de saída: TypeScript React Apollo, TypeScript Apollo Angular, TypeScript Stencil Apollo ou TypeScript urql.
3. Copie para o seu projeto a constante de documento gerada (por exemplo GetUserDocument) e os hooks, serviços ou componentes.

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

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

Detalhes e limitações

Cada opção executa primeiro @graphql-codegen/typescript e typescript-operations, então a saída também contém os tipos completos do schema e das operações (omitidos acima).

O React Apollo importa gql e os hooks de @apollo/client; urql e Stencil importam gql de graphql-tag; o Apollo Angular gera classes @Injectable como GetUserGQL.

Sem uma operação válida no editor Document, nenhum hook ou componente é gerado; um documento que não corresponde ao schema é ignorado com um comentário de aviso. A geração roda em um Web Worker do navegador.

FAQ

Ferramentas relacionadas

Especificações e referências

• GraphQL Code Generator: typescript-react-apollo