Converter GraphQL em tipos TypeScript — Numio
Gera tipos TypeScript a partir de um schema GraphQL com @graphql-codegen/typescript, além dos tipos de resultado e de variáveis das operações do painel Document. Campos nullable viram propriedades Maybe<T> opcionais; listas não nulas viram Array<T>.
Tipar os dados retornados por uma query em um frontend sem configurar um codegen.yml e rodar a CLI.
Quando usar
- Tipar os dados retornados por uma query em um frontend sem configurar um codegen.yml e rodar a CLI.
- Verificar como uma mudança no schema (um campo que passa a ser nullable, um novo valor de enum) vai ficar no TypeScript gerado antes de fazer commit.
Como usar
- Cole seu SDL (definições type, enum, interface, union, scalar) no editor GraphQL Schema.
- Coloque queries, mutations ou fragments no editor Document, ou esvazie-o para obter apenas os tipos do schema; um documento que não corresponde ao schema é ignorado com um comentário de aviso.
- Copie os tipos gerados: tipos do schema como User, além de GetUserQuery e GetUserQueryVariables para cada operação nomeada.
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 }
}Tipos TypeScript
…
export type Query = {
__typename?: "Query"
user?: Maybe<User>
}
export type QueryUserArgs = {
id: Scalars["ID"]["input"]
}
export type User = {
__typename?: "User"
id: Scalars["ID"]["output"]
name?: Maybe<Scalars["String"]["output"]>
tags: Array<Scalars["String"]["output"]>
}
export type GetUserQueryVariables = Exact<{
id: Scalars["ID"]["input"]
}>
export type GetUserQuery = {
__typename?: "Query"
user?: { __typename?: "User"; id: string; name?: string | null } | null
}Detalhes e limitações
A saída começa com tipos auxiliares fixos (Maybe, InputMaybe, Exact, MakeOptional, Scalars, …), abreviados como '…' acima. Scalars mapeia cada escalar para tipos de entrada e de saída separados.
Escalares personalizados como Date são tipados como any; valores de enum viram um enum TypeScript com chaves em PascalCase (USER vira User = "USER").
A geração roda em um Web Worker no seu navegador; nada é enviado. O resultado é formatado com Prettier sem ponto e vírgula, e a página não tem opções de configuração do codegen.
FAQ
Por que a saída começa com "// Document ignored"?
O editor Document é validado contra o seu schema, e o exemplo padrão consulta campos como username. Quando a validação falha, a página ainda gera os tipos do schema e coloca o primeiro erro em um comentário no topo. Corrija as operações ou esvazie o editor Document.
Como os campos nullable são tipados?
Um campo nullable como name: String vira name?: Maybe<Scalars["String"]["output"]>, em que Maybe<T> é T | null. Nos tipos de resultado das operações ele é escrito inline como name?: string | null.
Apenas os campos selecionados entram no tipo da query?
Sim. GetUserQuery contém só os campos que a query seleciona (aqui id e name), com __typename como propriedade opcional, enquanto o tipo User completo é gerado separadamente.