Del esquema GraphQL a tipos de TypeScript
Genere tipos a partir de archivos .graphql con codegen.
Del esquema GraphQL a tipos de TypeScript es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.
El problema: divergencia entre el esquema y los tipos
En los proyectos GraphQL, el esquema del servidor y los tipos de TypeScript del cliente pueden quedar fácilmente desincronizados si no se utiliza automatización. La generación de código resuelve este problema al derivar los tipos directamente del esquema.
# Without codegen: manual types that drift from schema
interface User { id: string; name: string; } // may not match schemaGraphQL Code Generator
@graphql-codegen/cli lee el esquema de GraphQL y genera automáticamente tipos de TypeScript.
npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescriptConfiguración de codegen.yml
Configure el origen del esquema y la ubicación de salida en codegen.yml.
# codegen.yml
schema: "./api/schema.graphql"
generates:
src/generated/types.ts:
plugins:
- typescriptEjecución del generador
Ejecute graphql-codegen para generar tipos de TypeScript a partir del esquema.
npx graphql-codegen
# Generates src/generated/types.ts with all schema typesEjemplo de salida generada
El archivo generado contiene interfaces de TypeScript que coinciden con todos los tipos de GraphQL del esquema.
// src/generated/types.ts (generated)
export type User = {
__typename?: "User";
id: string;
name: string;
email: string;
};
export type Query = {
__typename?: "Query";
user?: Maybe<User>;
};Esquema desde un endpoint remoto
Codegen también puede obtener el esquema de un endpoint de GraphQL activo mediante introspección.
# codegen.yml with remote schema
schema:
- https://api.example.com/graphql:
headers:
Authorization: "Bearer ${AUTH_TOKEN}"Mapeo de tipos escalares
Asigne escalares personalizados de GraphQL a tipos de TypeScript en la configuración de codegen.
# codegen.yml
config:
scalars:
DateTime: string
JSON: Record<string, unknown>
Upload: FileGestión de enumeraciones
Las enumeraciones de GraphQL se asignan a enumeraciones de cadenas de TypeScript o a tipos de unión, según la configuración de codegen.
# Generated from GraphQL enum Role { ADMIN USER GUEST }
export enum Role {
Admin = "ADMIN",
User = "USER",
Guest = "GUEST",
}No nulo y Maybe
Los campos anulables de GraphQL se convierten en Maybe (es decir, T | null | undefined) en los tipos generados, reflejando la nulabilidad del esquema.
// GraphQL: name: String (nullable)
// Generated: name?: Maybe<string>
// GraphQL: id: ID! (non-null)
// Generated: id: stringIntegración con CI
Ejecute codegen en CI para verificar que los tipos generados estén actualizados. Haga que la compilación falle si el esquema ha cambiado sin volver a generar los tipos.
# CI: check no drift
npx graphql-codegen --check
# Exits 1 if generated files are out of dateResumen: del esquema a los tipos
GraphQL Code Generator lee el esquema y produce automáticamente tipos de TypeScript. Configure la herramienta con codegen.yml, ejecute graphql-codegen e intégrala en CI para evitar la divergencia del esquema.
Comprobación rápida
¿Cuál es el propósito principal de GraphQL Code Generator?
Lo que ha aprendido
GraphQL Code Generator elimina la divergencia entre el esquema y los tipos al generar TypeScript a partir del esquema. Configúrelo con codegen.yml, asigne los escalares personalizados e intégralo en CI para garantizar que los tipos estén actualizados.
Preguntas frecuentes
¿La lección «Del esquema GraphQL a tipos de TypeScript» es gratis?
Sí — el texto completo de «Del esquema GraphQL a tipos de TypeScript» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Del esquema GraphQL a tipos de TypeScript»?
Genere tipos a partir de archivos .graphql con codegen. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar TypeScript Academy?
No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Del esquema GraphQL a tipos de TypeScript»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?
Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Del esquema GraphQL a tipos de TypeScript
- Resolvers tipados con GraphQL Code Generator
- Cliente GraphQL tipado con Apollo y urql
- Seguridad de tipos de extremo a extremo: flujo schema first