TypeScript Academy · Lesson

Typed Resolvers with GraphQL Code Generator

Write resolvers with correct input and return types.

Typed Resolvers with GraphQL Code Generator is a free TypeScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Resolver Typing Problem

GraphQL resolvers are plain functions, but without typed signatures it's easy to return wrong shapes. Codegen generates resolver types that enforce correct return values.

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

Adding the Resolvers Plugin

Install and configure @graphql-codegen/typescript-resolvers to generate resolver map types.

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

codegen.yml for Resolvers

Add the resolvers plugin output alongside the base TypeScript types.

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

Using the Generated ResolverMap

Apply the generated Resolvers type to your resolver map object for full type safety.

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

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

Context Typing

Pass your context type to the Resolvers generic so resolver functions receive a typed context object.

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 Types

Mapper types let you map GraphQL types to your internal model types, so resolvers can return your domain objects instead of GraphQL output types.

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

Field Resolver Typing

Individual field resolvers on types are also typed, including parent and context arguments.

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

Typed Mutations

Mutation resolvers receive typed input arguments derived from the schema input types.

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

Typed Subscriptions

Subscription resolvers have a subscribe function and a resolve function, both typed by codegen.

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

Keeping Codegen in Sync

Add a pre-build or pre-commit hook to regenerate resolver types when the schema changes, preventing stale types from reaching production.

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

Recap: Typed Resolvers

The typescript-resolvers codegen plugin generates a Resolvers type that enforces correct return shapes, argument types, and context structure across all your GraphQL resolvers.

Quick Check

What does the contextType config option do in codegen?

What You Learned

Typed GraphQL resolvers with codegen enforce correct return types, argument shapes, and context objects across your entire resolver map. Use mapper types for domain objects and keep codegen in your build pipeline to prevent drift.

Frequently asked questions

Is the “Typed Resolvers with GraphQL Code Generator” lesson free?

Yes — the full text of “Typed Resolvers with GraphQL Code Generator” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Typed Resolvers with GraphQL Code Generator”?

Write resolvers with correct input and return types. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Typed Resolvers with GraphQL Code Generator” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

GraphQL Schema to TypeScript Types
Typed Resolvers with GraphQL Code Generator
Typed GraphQL Client with Apollo and urql
End-to-End Type Safety: Schema First Workflow

← Back to TypeScript Academy