Guide: GraphQL Yoga / Apollo Server

GraphQL Code Generator’s @graphql-codegen/typescript-resolvers plugin generates TypeScript types for your GraphQL API’s resolvers.

Video tutorial

Episode #26 of graphql.wtf is a great introduction to @graphql-codegen/typescript-resolvers:

Guide

Most GraphQL API resolvers remain untyped or wrongly typed, which leads to multiple issues:

• resolvers not compliant with the Schema definition

• unhandled scenarios

• typos in the resolvers’ function type signature

For this reason, GraphQL Code Generator provides @graphql-codegen/typescript-resolvers that help automate the generation of resolvers’ typings.

Just a few configuration steps are required to get the resolvers types generated:

1. Move your GraphQL Schema declaration in dedicated .graphql files

type Author {
  id: Int!
  firstName: String!
  lastName: String!
  posts(findTitle: String): [Post]
}
 
type Post {
  id: Int!
  title: String!
  author: Author
}
 
type Query {
  posts: [Post]
}

2. Install the @graphql-codegen/typescript-resolvers plugin

npm i -D @graphql-codegen/cli @graphql-codegen/typescript-resolvers @graphql-codegen/typescript

3. Configure the plugin

Create or update your codegen.ts file as follows:

import type { CodegenConfig } from '@graphql-codegen/cli';
 
const config: CodegenConfig = {
  schema: 'schema.graphql',
  generates: {
    './resolvers-types.ts': {
      config: {
        useIndexSignature: true,
      },
      plugins: ['typescript', 'typescript-resolvers'],
    },
  },
};
export default config;

4. Run the codegen and update your code

Assuming that, as recommended, your package.json has the following script:

{
  "scripts": {
    "generate": "graphql-codegen"
  }
}

Running the following generates the graphql/generated.tsx file.

npm run generate

We can now write/migrate our GraphQL API implementation as follows:

import { readFileSync } from 'node:fs'
import { ApolloServer } from 'apollo-server'
import { Resolvers } from './resolvers-types'
 
const typeDefs = readFileSync('./schema.graphql', 'utf8')
 
const resolvers: Resolvers = {
  Query: {
    // typed resolvers
  }
}
 
const server = new ApolloServer({ typeDefs, resolvers })
 
// The `listen` method launches a web server
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`)
})

A complete tutorial, written by The Guild’s CTO, Dotan Simha, is available on our blog: Better Type Safety for your GraphQL resolvers with GraphQL Codegen.

For more advanced configuration (models or context typing), please refer to the plugin documentation.