Getting Started

Introduction to GraphQL Code Generator

GraphQL Code Generator is a plugin-based tool that helps you get the best out of your GraphQL stack.

From back-end to front-end, GraphQL Code Generator automates the generation of:

  • Typed Queries, Mutations and, Subscriptions for React, Vue, Angular, Next.js, Svelte, whether you are using Apollo Client, URQL or, React Query.
  • Typed GraphQL resolvers, for any Node.js (GraphQL Yoga, GraphQL Modules, TypeGraphQL or Apollo) or Java GraphQL server.
  • Fully-typed Node.js SDKs, Apollo Android support, and more!

The perfect GraphQL Developer Experience

To illustrate how GraphQL Code Generator improves your developer experience, let's take a look at the front-end and back-end usage of the following schema:

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

The following sections showcase why GraphQL Code Generator is a game-changer for your GraphQL Stack.

From the front-end

Most client-side implementations without GraphQL Code Generator would query the API as showcased in the following examples:

import { useQuery } from 'urql'
interface PostQuery {
  posts: {
    id: string
    title: string
    author?: {
      id: string
      firstName: string
      lastName: string
const postsQueryDocument = /* GraphQL */ `
  query Posts {
    posts {
      author {
const Posts = () => {
  const [result] = useQuery<PostQuery>({ query: postsQueryDocument })
  // …

Manually maintaining the GraphQL operation types or the complete absence of types can lead to many issues:

  • outdated typing (regarding the current Schema)

  • typos

  • partial typing of data (not all Schema's fields has a corresponding type)

The strength of your front-end application types is based on your data types. Any mistake on your manually maintained data types ripples in many of your components.

For this reason, automating and generating the typing of your GraphQL operations will both improve the developer experience and stability of your stack.

After installing and configuring GraphQL Code Generator, our front-end code will be fully-typed and up-to-date as follows:

import { useQuery } from 'urql'
import { postsQueryDocument } from './graphql/generated'
const Posts = () => {
  const [result] = useQuery({ query: postsQueryDocument })
  // `result` is fully typed!
  // …

Now, with simple configuration and an npm/yarn script, a front-end developers benefits from:

  • up-to-date typings

  • autocompletion on all queries, mutations and, subscription variables and results

  • less boilerplate (thanks to full code generation such as React hooks generation)


How does GraphQL Code Generator work?

More details on the inner working of GraphQL Code Generator are available on this page.

To the back-end

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

  • resolvers are not compliant with the schema definition

  • typos in the resolvers' function type signature

For this reason, GraphQL Code Generator provides multiple plugins that help you automate the generation of resolvers' typings.

Here are an example of a GraphQL API leveraging GraphQL Code Generator resolvers typings (based on the schema.graphql above):

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

What's next?

Start by installing GraphQL Code Generator in your project.

Then, you can either read a guide or go over the list of available plugins to find more plugins that satisfy your needs.

If you are experiencing any issues, you can reach us via the following channels: