Resolução tipada com GraphQL Code Generator
Escreva resolvers com tipos corretos de entrada e retorno
Resolução tipada com GraphQL Code Generator é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.
O problema da tipagem dos resolvedores
Os resolvedores GraphQL são funções comuns, mas, sem assinaturas tipadas, é fácil retornar formatos incorretos. A geração de código produz tipos de resolvedor que impõem valores de retorno corretos.
// Without typed resolvers — any type allowed
const userResolver = async (_, { id }) => fetchUser(id);Adicionando o plug-in de resolvedores
Instale e configure @graphql-codegen/typescript-resolvers para gerar tipos de mapa de resolvedores.
npm install --save-dev @graphql-codegen/typescript-resolverscodegen.yml para resolvedores
Adicione a saída do plug-in de resolvedores junto aos tipos TypeScript básicos.
# codegen.yml
generates:
src/generated/types.ts:
plugins:
- typescript
src/generated/resolvers.ts:
plugins:
- typescript-resolversUsando o ResolverMap gerado
Aplique o tipo Resolvers gerado ao objeto de mapa de resolvedores para obter segurança completa dos tipos.
import { Resolvers } from "./generated/resolvers";
const resolvers: Resolvers = {
Query: {
user: async (_, { id }) => fetchUser(id),
// Return type enforced: must match User schema
},
};Tipagem de Context
Passe seu tipo de Context ao genérico Resolvers para que as funções de resolvedor recebam um objeto Context 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 mapeamento
Os tipos de mapeamento permitem mapear tipos GraphQL para seus tipos de modelo interno, para que os resolvedores possam retornar seus objetos de domínio em vez dos tipos de saída GraphQL.
# codegen.yml
config:
mappers:
User: "src/models#UserModel"Tipagem de resolvedores de campo
Os resolvedores de campos individuais nos tipos também são tipados, incluindo os argumentos de pai e Context.
// Typed field resolver on User type
const resolvers: Resolvers<Context> = {
User: {
fullName: (parent) => `${parent.firstName} ${parent.lastName}`,
// parent is UserModel (from mapper)
},
};Mutações tipadas
Os resolvedores de mutação recebem argumentos de entrada tipados derivados dos tipos de entrada do esquema.
// Schema: createUser(input: CreateUserInput!): User!
const resolvers: Resolvers = {
Mutation: {
createUser: (_, { input }) => {
// input: CreateUserInput — fully typed
return createUser(input.name, input.email);
},
},
};Subscrições tipadas
Os resolvedores de subscrição têm uma função subscribe e uma função resolve, ambas tipadas pela geração de código.
const resolvers: Resolvers = {
Subscription: {
messageAdded: {
subscribe: () => pubsub.asyncIterator("MESSAGE_ADDED"),
resolve: (payload) => payload.messageAdded, // typed
},
},
};Mantendo a geração de código sincronizada
Adicione um gancho de pré-compilação ou pré-confirmação para gerar novamente os tipos de resolvedor quando o esquema mudar, impedindo que tipos obsoletos cheguem à produção.
// package.json
{
"scripts": {
"predev": "graphql-codegen",
"prebuild": "graphql-codegen"
}
}Recapitulação: resolvedores tipados
O plug-in de geração de código typescript-resolvers gera um tipo Resolvers que impõe formatos corretos de retorno, tipos de argumentos e estrutura de Context em todos os seus resolvedores GraphQL.
Verificação rápida
O que a opção de configuração contextType faz na geração de código?
O que você aprendeu
Resolvedores GraphQL tipados com geração de código impõem tipos de retorno corretos, formatos de argumentos e objetos Context em todo o seu mapa de resolvedores. Use tipos de mapeamento para objetos de domínio e mantenha a geração de código no seu fluxo de compilação para evitar divergências.
Perguntas Frequentes
A aula “Resolução tipada com GraphQL Code Generator” é grátis?
Sim — o texto completo de “Resolução tipada com GraphQL Code Generator” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.
O que vou aprender em “Resolução tipada com GraphQL Code Generator”?
Escreva resolvers com tipos corretos de entrada e retorno Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar TypeScript Academy?
Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Resolução tipada com GraphQL Code Generator”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de TypeScript Academy?
Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Esquema GraphQL para tipos TypeScript
- Resolução tipada com GraphQL Code Generator
- Cliente GraphQL tipado com Apollo e urql
- Segurança de tipos de ponta a ponta: fluxo orientado pelo esquema