graphql-code-generator

GraphQL code generator with flexible support for custom templates https://graphql-code-generator.com

GraphQL Code Generator

npm version CircleCI code style: prettier renovate-app badge

graphql-code-generator.com

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, GraphlQL Code Generator got you covered.

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

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

Quick Start

Install using npm (or yarn):

$ npm install graphql-code-generator

Create a basic codegen.yml configuration file, point to your schema, and pick the plugins you wish to use. For example:

schema: http://localhost:3000/graphql
generates:
  src/types.ts:
    - typescript-common
    - typescript-server

Then, run the code-generator using gql-gen:

$ gql-gen

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
}

And generate the following Typescript typings:

interface Query {
  posts?: Post[];
}

interface Post {
  id: number;
  title: string;
  author: Author;
}

interface Author {
  id: number;
  firstName: string;
  lastName: string;
  posts?: Post[];
}

interface PostsAuthorArgs {
  findTitle?: string;
}

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.