GraphQL Code Generator

GraphQL Code Generator is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can utilize GraphQL Code Generator to generate output from your GraphQL Schema and GraphQL Documents (query/mutation/subscription/fragment).

By analyzing the schema and documents and parsing it, GraphQL Code Generator can output code at a wide variety of formats, based on pre-defined templates or based on custom user-defined ones. Regardless of the language that you’re using, GraphQL Code Generator got you covered.

GraphQL Code Generator lets you choose the output that you need, based on plugins, which are very flexible and customizable. You can also write your plugins to generate custom outputs that match your needs.

You can try this tool live on your browser and see some useful examples. Check out GraphQL Code Generator Live Examples.

We currently support and maintain these plugins (TypeScript, Flow, React, Angular, MongoDB, Stencil, Reason, and some more), and there is an active community that writes and maintains custom plugins.

What is GraphQL Code Generator?

GraphQL Code Generator is a CLI tool that can generate TypeScript typings out of a GraphQL schema. When we develop a GraphQL backend, there would be many instances where we would find ourselves writing the same things which are already described by the GraphQL schema, only in a different format; for example: resolver signatures, MongoDB models, Angular services etc.

GraphQL Code Generator was built to address exactly that. By analyzing the schema and parsing it, GraphQL Code Generator can output code at a wide variety of formats, based on pre-defined plugins or based on custom user-defined ones. Regardless of the language that you’re using, GraphQL Code Generator got you covered.

For example, given 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]} schema { query: Query}

Quick Start

Start by installing the basic deps of GraphQL Codegen;

yarn add graphql
yarn add -D @graphql-codegen/cli

GraphQL Code Generator lets you setup everything by simply running the following command:

yarn graphql-codegen init

Question by question, it will guide you through the whole process of setting up a schema, selecting plugins, picking a destination of a generated file, and a lot more.

If you don’t want to use the wizard, install it by yourself and create a basic codegen.yml configuration file, point to your schema, and pick the plugins you wish to use.

Install CLI using yarn:

yarn add -D @graphql-codegen/cli

And create a config like below:

schema: http://localhost:3000/graphql
 generates:
  ./src/types.d.ts:
   plugins:
    - typescript

Then, run the code-generator using graphql-codegen command:

yarn graphql-codegen

The command above may fetch (for example) the following GraphQL 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]
}

 schema {
   query: Query
}

Start by installing GraphQL Code Generator in your project, and use the basic plugins to generate some code.

You can go over the list of available plugins and find more plugins that matches your needs.

If you are having issues, you can reach us this the following:

• Found a bug? report it in our GitHub repo
• Need help or have a question? You can use the live chat box in the corner of the screen, ask it in our GitHub Discussions page or reach us directly in our Discord.
• We have more awesome open source tools!
• You can visit our website for more information about us and what we do