Need help with graphql-code-generator?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dotansimha
5.9K Stars 588 Forks MIT License 5.4K Commits 145 Opened issues

Description

A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.

Services available

!
?

Need anything else?

Contributors list

No Data

CodeGen

npm version CircleCI Discord Chat code style: prettier renovate-app badge

graphql-code-generator.com

GraphQL Codegen 1.0 is here!

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.

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 }

And generate the following TypeScript typings:

export type Maybe = T | null;

/** All built-in and custom scalars, mapped to their actual values */ export type Scalars = { ID: string, String: string, Boolean: boolean, Int: number, Float: number, };

export type Author = { __typename?: 'Author', id: Scalars['Int'], firstName: Scalars['String'], lastName: Scalars['String'], posts?: Maybe>>, };

export type AuthorPostsArgs = { findTitle?: Maybe };

export type Post = { __typename?: 'Post', id: Scalars['Int'], title: Scalars['String'], author: Author, };

export type Query = { __typename?: 'Query', posts?: Maybe>>, };

Links

Besides our docs page, feel free to go through our published Medium articles to get a better grasp of what GraphQL Code Generator is all about:

Contributing

Feel free to open issues and pull requests. We're always welcome support from the community.

For a contribution guide, please refer to: http://graphql-code-generator.com/docs/custom-codegen/contributing

License

GitHub license

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.