0Pricing
TypeScript Academy · Lezione

Resolver tipizzati con GraphQL Code Generator

Scriva resolver con tipi corretti per input e valori restituiti.

Resolver tipizzati con GraphQL Code Generator è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Il problema della tipizzazione dei resolver

I resolver GraphQL sono semplici funzioni, ma senza firme tipizzate è facile restituire strutture errate. Codegen genera i tipi dei resolver che garantiscono valori restituiti corretti.

// Without typed resolvers — any type allowed
const userResolver = async (_, { id }) => fetchUser(id);

Aggiungere il plugin dei resolver

Installi e configuri @graphql-codegen/typescript-resolvers per generare i tipi delle mappe dei resolver.

npm install --save-dev @graphql-codegen/typescript-resolvers

codegen.yml per i resolver

Aggiunga l'output del plugin dei resolver accanto ai tipi TypeScript di base.

# codegen.yml
generates:
  src/generated/types.ts:
    plugins:
      - typescript
  src/generated/resolvers.ts:
    plugins:
      - typescript-resolvers

Utilizzare la ResolverMap generata

Applichi il tipo Resolvers generato all'oggetto della mappa dei resolver per ottenere una sicurezza completa sui tipi.

import { Resolvers } from "./generated/resolvers";

const resolvers: Resolvers = {
  Query: {
    user: async (_, { id }) => fetchUser(id),
    // Return type enforced: must match User schema
  },
};

Tipizzazione del context

Passi il tipo del context al generics Resolvers, in modo che le funzioni dei resolver ricevano un oggetto context tipizzato.

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
  },
};

Tipi mapper

I tipi mapper consentono di associare i tipi GraphQL ai tipi dei modelli interni, così i resolver possono restituire gli oggetti del dominio invece dei tipi di output GraphQL.

# codegen.yml
config:
  mappers:
    User: "src/models#UserModel"

Tipizzazione dei resolver dei campi

Anche i singoli resolver dei campi nei tipi sono tipizzati, inclusi gli argomenti parent e context.

// Typed field resolver on User type
const resolvers: Resolvers<Context> = {
  User: {
    fullName: (parent) => `${parent.firstName} ${parent.lastName}`,
    // parent is UserModel (from mapper)
  },
};

Mutation tipizzate

I resolver delle mutation ricevono argomenti di input tipizzati, derivati dai tipi di input dello schema.

// Schema: createUser(input: CreateUserInput!): User!
const resolvers: Resolvers = {
  Mutation: {
    createUser: (_, { input }) => {
      // input: CreateUserInput — fully typed
      return createUser(input.name, input.email);
    },
  },
};

Subscription tipizzate

I resolver delle subscription hanno una funzione subscribe e una funzione resolve, entrambe tipizzate da codegen.

const resolvers: Resolvers = {
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator("MESSAGE_ADDED"),
      resolve: (payload) => payload.messageAdded, // typed
    },
  },
};

Mantenere codegen sincronizzato

Aggiunga un hook pre-build o pre-commit per rigenerare i tipi dei resolver quando cambia lo schema, evitando che tipi obsoleti arrivino in produzione.

// package.json
{
  "scripts": {
    "predev": "graphql-codegen",
    "prebuild": "graphql-codegen"
  }
}

Riepilogo: resolver tipizzati

Il plugin di codegen typescript-resolvers genera un tipo Resolvers che garantisce strutture di ritorno, tipi degli argomenti e struttura del context corretti in tutti i resolver GraphQL.

Verifica rapida

Che cosa fa l'opzione di configurazione contextType in codegen?

Che cosa ha imparato

I resolver GraphQL tipizzati con codegen garantiscono tipi restituiti, strutture degli argomenti e oggetti context corretti nell'intera mappa dei resolver. Utilizzi i tipi mapper per gli oggetti del dominio e mantenga codegen nella pipeline di build per evitare la deriva dei tipi.

Domande Frequenti

La lezione «Resolver tipizzati con GraphQL Code Generator» è gratuita?

Sì — il testo completo di «Resolver tipizzati con GraphQL Code Generator» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Resolver tipizzati con GraphQL Code Generator»?

Scriva resolver con tipi corretti per input e valori restituiti. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Resolver tipizzati con GraphQL Code Generator»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Dallo schema GraphQL ai tipi TypeScript
  2. Resolver tipizzati con GraphQL Code Generator
  3. Client GraphQL tipizzato con Apollo e urql
  4. Sicurezza dei tipi end-to-end: workflow schema first
← Torna a TypeScript Academy