TypeScript Academy · Les

Getypeerde resolvers met GraphQL Code Generator

Schrijf resolvers met de juiste invoer- en retourtypen.

Les 2 van 413 stappen

Getypeerde resolvers met GraphQL Code Generator is een gratis TypeScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.

Het probleem met resolvertypen

GraphQL-resolvers zijn gewone functies, maar zonder getypeerde handtekeningen is het eenvoudig om de verkeerde structuren terug te geven. Codegen genereert resolvertypen die correcte retourwaarden afdwingen.

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

De resolversplug-in toevoegen

Installeer en configureer @graphql-codegen/typescript-resolvers om typen voor resolverkaarten te genereren.

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

codegen.yml voor resolvers

Voeg de uitvoer van de resolversplug-in toe naast de basis-typen van TypeScript.

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

De gegenereerde ResolverMap gebruiken

Pas het gegenereerde type Resolvers toe op je object met resolvers om volledige typeveiligheid te verkrijgen.

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

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

Context typeren

Geef je contexttype door aan het generieke type Resolvers, zodat resolverfuncties een getypeerd contextobject ontvangen.

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

Typen voor modelkoppeling

Met typen voor modelkoppeling kun je GraphQL-typen aan je interne modeltypen koppelen, zodat resolvers je domeinobjecten kunnen teruggeven in plaats van GraphQL-uitvoertypen.

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

Veldresolvers typeren

Ook afzonderlijke veldresolvers op typen zijn getypeerd, inclusief argumenten voor het bovenliggende object en de context.

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

Getypeerde mutaties

Mutatieresolvers ontvangen getypeerde invoerargumenten die zijn afgeleid van de invoertypen in het schema.

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

Getypeerde abonnementen

Abonnementsresolvers hebben een functie subscribe en een functie resolve, die beide door codegen worden getypeerd.

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

Codegen synchroon houden

Voeg een hook vóór het bouwen of committen toe om resolvertypen opnieuw te genereren wanneer het schema verandert. Zo voorkom je dat verouderde typen productie bereiken.

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

Samenvatting: getypeerde resolvers

De codegen-plug-in typescript-resolvers genereert een type Resolvers dat correcte retourstructuren, argumenttypen en contextstructuur voor al je GraphQL-resolvers afdwingt.

Korte controle

Wat doet de configuratieoptie contextType in codegen?

Beantwoord dit in de interactieve les

Wat je hebt geleerd

Getypeerde GraphQL-resolvers met codegen dwingen correcte retourtypen, argumentstructuren en contextobjecten af in je volledige resolverkaart. Gebruik typen voor modelkoppeling voor domeinobjecten en neem codegen op in je bouwpijplijn om te voorkomen dat typen uit elkaar gaan lopen.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 101
Lessen: 352

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Getypeerde resolvers met GraphQL Code Generator” gratis?

Ja — de volledige tekst van “Getypeerde resolvers met GraphQL Code Generator” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Getypeerde resolvers met GraphQL Code Generator”?

Schrijf resolvers met de juiste invoer- en retourtypen. Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met TypeScript Academy te beginnen?

Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Getypeerde resolvers met GraphQL Code Generator”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?

Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

GraphQL-schema naar TypeScript-typen
Getypeerde resolvers met GraphQL Code Generator
Getypeerde GraphQL-client met Apollo en urql
End-to-end typeveiligheid: schema-firstworkflow

← Terug naar TypeScript Academy