TypeScript Academy · Lektion

Typade resolvers med GraphQL Code Generator

Skriv resolvers med korrekta indata- och returtyper

Lektion 2 av 413 steg

Typade resolvers med GraphQL Code Generator är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Problemet med typning av resolvers

GraphQL-resolvers är vanliga funktioner, men utan typade signaturer är det lätt att returnera felaktiga former. Codegen genererar resolvertyper som säkerställer korrekta returvärden.

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

Lägg till Resolvers-pluginen

Installera och konfigurera @graphql-codegen/typescript-resolvers för att generera typer för resolvermappningar.

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

codegen.yml för resolvers

Lägg till utdata från resolvers-pluginen bredvid de grundläggande TypeScript-typerna.

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

Använd den genererade ResolverMap

Tillämpa den genererade typen Resolvers på resolvermappningsobjektet för fullständig typsäkerhet.

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

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

Typning av context

Skicka er context-typ till generiken Resolvers så att resolverfunktionerna får ett typat context-objekt.

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

Mapper-typer

Mapper-typer låter er mappa GraphQL-typer till interna modelltyper, så att resolvers kan returnera domänobjekt i stället för GraphQL:s utdatatyp.

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

Typning av fältresolvers

Enskilda fältresolvers på typer är också typade, inklusive argumenten för parent och context.

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

Typade mutationer

Mutation-resolvers tar emot typade indataargument som härleds från schemats indatatyper.

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

Typade prenumerationer

Prenumerationsresolvers har en subscribe-funktion och en resolve-funktion, som båda typas av codegen.

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

Håll codegen synkroniserat

Lägg till en pre-build- eller pre-commit-hook som genererar om resolvertyper när schemat ändras, så att inaktuella typer inte når produktion.

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

Sammanfattning: Typade resolvers

Codegen-pluginen typescript-resolvers genererar typen Resolvers, som säkerställer korrekta returformer, argumenttyper och context-struktur i alla GraphQL-resolvers.

Snabbkontroll

Vad gör konfigurationsalternativet contextType i codegen?

Det här har ni lärt er

Typade GraphQL-resolvers med codegen säkerställer korrekta returtyper, argumentformer och context-objekt i hela resolvermappningen. Använd mapper-typer för domänobjekt och behåll codegen i byggprocessen för att förhindra att typerna hamnar ur synk.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
101
Lektioner
352

Vanliga frågor

Är lektionen ”Typade resolvers med GraphQL Code Generator” gratis?

Ja – hela texten till ”Typade resolvers med GraphQL Code Generator” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Typade resolvers med GraphQL Code Generator”?

Skriv resolvers med korrekta indata- och returtyper Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Typade resolvers med GraphQL Code Generator”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Från GraphQL-schema till TypeScript-typer
  2. Typade resolvers med GraphQL Code Generator
  3. Typad GraphQL-klient med Apollo och urql
  4. Typsäkerhet från början till slut: schema-first-arbetsflöde
← Tillbaka till TypeScript Academy