graphql-server-apollo-yoga.mdx

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

import { Tabs, Callout } from '@theguild/components'

Guide: GraphQL Yoga / Apollo Server

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

The GraphQL Codegen server preset configures `@graphql-codegen/typescript-resolvers` and comes with features to streamline the developer experience such as better server integration, type-safety, generated resolvers, and more!

Read how to set up GraphQL Server with server preset

Video tutorial

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

<iframe src="https://youtube.com/embed/tHMaNmqPIC4" /> [More weekly episodes are available in `graphql.wtf`](https://graphql.wtf) by [Jamie Barton](https://twitter.com/notrab).

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:

<Tabs items={['Apollo Server', 'GraphQL Yoga']}> <Tabs.Tab>

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;

</Tabs.Tab>

<Tabs.Tab>

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'schema.graphql',
  generates: {
    './resolvers-types.ts': {
      plugins: ['typescript', 'typescript-resolvers'],
    },
  },
};
export default config;

</Tabs.Tab>

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:

<Tabs items={['Apollo Server', 'GraphQL Yoga']}> <Tabs.Tab>

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}`)
})

</Tabs.Tab>

<Tabs.Tab>

import { readFileSync } from 'node:fs'
import { createYoga, createSchema } from 'graphql-yoga';
import { createServer } from 'http';
import { Resolvers } from './resolvers-types'

const typeDefs = readFileSync('./schema.graphql', 'utf8')

const resolvers: Resolvers = {
  Query: {
    // typed resolvers
  }
}

const schema = createSchema({ typeDefs, resolvers })
const yoga = createYoga({ schema })
const server = createServer(yoga)

server.listen(3000)

</Tabs.Tab>

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.