Convertir GraphQL a tipos de TypeScript — Numio
Genera tipos TypeScript a partir de un esquema GraphQL con @graphql-codegen/typescript, además de los tipos de resultado y de variables de las operaciones del panel Document. Los campos nullable pasan a propiedades Maybe<T> opcionales; las listas no nulas pasan a Array<T>.
Tipar los datos que devuelve una query en un frontend sin configurar un codegen.yml ni ejecutar la CLI.
Cuándo usarla
- Tipar los datos que devuelve una query en un frontend sin configurar un codegen.yml ni ejecutar la CLI.
- Comprobar cómo se verá en el TypeScript generado un cambio de esquema (un campo que pasa a nullable, un valor de enum nuevo) antes de hacer commit.
Cómo usarla
- Pega tu SDL (definiciones type, enum, interface, union, scalar) en el editor GraphQL Schema.
- Pon queries, mutations o fragments en el editor Document, o vacíalo para obtener solo los tipos del esquema; un documento que no coincide con el esquema se omite con un comentario de aviso.
- Copia los tipos generados: tipos del esquema como User, más GetUserQuery y GetUserQueryVariables por cada operación con nombre.
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 }
}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
}Detalles y limitaciones
La salida empieza con tipos auxiliares fijos (Maybe, InputMaybe, Exact, MakeOptional, Scalars, …), abreviados como '…' arriba. Scalars asigna a cada escalar tipos de entrada y de salida separados.
Los escalares personalizados como Date se tipan como any; los valores de enum pasan a un enum de TypeScript con claves en PascalCase (USER pasa a User = "USER").
La generación se ejecuta en un Web Worker de tu navegador; no se sube nada. El resultado se formatea con Prettier sin punto y coma, y la página no tiene opciones de configuración de codegen.
FAQ
¿Por qué la salida empieza por "// Document ignored"?
El editor Document se valida contra tu esquema, y su ejemplo por defecto consulta campos como username. Cuando la validación falla, la página genera igualmente los tipos del esquema y pone el primer error en un comentario al principio. Corrige las operaciones o vacía el editor Document.
¿Cómo se tipan los campos nullable?
Un campo nullable como name: String pasa a name?: Maybe<Scalars["String"]["output"]>, donde Maybe<T> es T | null. En los tipos de resultado de las operaciones se escribe en línea como name?: string | null.
¿El tipo de la query incluye solo los campos seleccionados?
Sí. GetUserQuery contiene solo los campos que selecciona la query (aquí id y name), con __typename como propiedad opcional, mientras que el tipo User completo se genera por separado.