The Guild LogoThe Guild Monogram
Docs

GraphQL Code Generator

Generate anything from GraphQL schema / operations!

Contact Us

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

#schema.graphql 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

yarn add @graphql-codegen/typescript-resolvers yarn add @graphql-codegen/typescript

3. Configure the plugin

Create or update your codegen.yaml file as follows:

schema: schema.graphql generates: ./resolvers-types.ts: config: useIndexSignature: true plugins: - typescript - typescript-resolvers

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.

yarn generate

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

import { ApolloServer } from 'apollo-server' import { readFileSync } from 'fs' 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.