Resolvers tipados con GraphQL Code Generator
Escriba resolvers con tipos correctos para las entradas y los valores devueltos.
Resolvers tipados con GraphQL Code Generator es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 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 de tipar los resolvers
Los resolvers de GraphQL son funciones normales, pero sin firmas tipadas es fácil devolver formas incorrectas. Codegen genera tipos para los resolvers que garantizan valores de retorno correctos.
// Without typed resolvers — any type allowed
const userResolver = async (_, { id }) => fetchUser(id);Adición del complemento de resolvers
Instale y configure @graphql-codegen/typescript-resolvers para generar tipos de mapas de resolvers.
npm install --save-dev @graphql-codegen/typescript-resolverscodegen.yml para resolvers
Añada la salida del complemento de resolvers junto a los tipos base de TypeScript.
# codegen.yml
generates:
src/generated/types.ts:
plugins:
- typescript
src/generated/resolvers.ts:
plugins:
- typescript-resolversUso del ResolverMap generado
Aplique el tipo Resolvers generado al objeto del mapa de resolvers para obtener seguridad de tipos completa.
import { Resolvers } from "./generated/resolvers";
const resolvers: Resolvers = {
Query: {
user: async (_, { id }) => fetchUser(id),
// Return type enforced: must match User schema
},
};Tipado del contexto
Pase el tipo de su contexto al genérico Resolvers para que las funciones de los resolvers reciban un objeto de contexto tipado.
interface Context { db: Database; user?: AuthUser; }
// codegen.yml
config:
contextType: "src/context#Context"
// Generated: Resolvers<Context>
const resolvers: Resolvers<Context> = {
Query: {
me: (_, __, ctx) => ctx.user, // ctx: Context
},
};Tipos de mapeo
Los tipos de mapeo permiten asignar los tipos de GraphQL a los tipos de su modelo interno, de modo que los resolvers puedan devolver sus objetos de dominio en lugar de los tipos de salida de GraphQL.
# codegen.yml
config:
mappers:
User: "src/models#UserModel"Tipado de resolvers de campo
Los resolvers de campos individuales de los tipos también están tipados e incluyen los argumentos de padre y contexto.
// Typed field resolver on User type
const resolvers: Resolvers<Context> = {
User: {
fullName: (parent) => `${parent.firstName} ${parent.lastName}`,
// parent is UserModel (from mapper)
},
};Mutaciones tipadas
Los resolvers de mutaciones reciben argumentos de entrada tipados derivados de los tipos de entrada del esquema.
// Schema: createUser(input: CreateUserInput!): User!
const resolvers: Resolvers = {
Mutation: {
createUser: (_, { input }) => {
// input: CreateUserInput — fully typed
return createUser(input.name, input.email);
},
},
};Suscripciones tipadas
Los resolvers de suscripciones tienen una función subscribe y una función resolve, ambas tipadas por codegen.
const resolvers: Resolvers = {
Subscription: {
messageAdded: {
subscribe: () => pubsub.asyncIterator("MESSAGE_ADDED"),
resolve: (payload) => payload.messageAdded, // typed
},
},
};Mantener codegen sincronizado
Añada un hook previo a la compilación o a la confirmación para volver a generar los tipos de resolvers cuando cambie el esquema, evitando que lleguen tipos obsoletos a producción.
// package.json
{
"scripts": {
"predev": "graphql-codegen",
"prebuild": "graphql-codegen"
}
}Resumen: resolvers tipados
El complemento de generación de código typescript-resolvers genera un tipo Resolvers que garantiza formas de retorno, tipos de argumentos y estructuras de contexto correctos en todos los resolvers de GraphQL.
Comprobación rápida
¿Qué hace la opción de configuración contextType en codegen?
Lo que ha aprendido
Los resolvers de GraphQL tipados con codegen garantizan tipos de retorno, formas de argumentos y objetos de contexto correctos en todo el mapa de resolvers. Utilice tipos de mapeo para los objetos de dominio y mantenga codegen en la cadena de compilación para evitar divergencias.
Aprende TypeScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 101
- Lecciones
- 352
Preguntas frecuentes
¿La lección «Resolvers tipados con GraphQL Code Generator» es gratis?
Sí — el texto completo de «Resolvers tipados con GraphQL Code Generator» 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 «Resolvers tipados con GraphQL Code Generator»?
Escriba resolvers con tipos correctos para las entradas y los valores devueltos. 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 2 de 4.
¿Cuánto tiempo toma la lección «Resolvers tipados con GraphQL Code Generator»?
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