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 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.
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
Install using yarn:
$ yarn add -D graphql @graphql-codegen/cli
GraphQL Code Generator lets you setup everything by simply running the following command:
$ 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, 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
Then, run the code-generator using graphql-codegen command:
$ 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> = 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<Array<Maybe<Post>>>,
};
export type AuthorPostsArgs = {
findTitle?: Maybe<Scalars['String']>
};
export type Post = {
__typename?: 'Post',
id: Scalars['Int'],
title: Scalars['String'],
author: Author,
};
export type Query = {
__typename?: 'Query',
posts?: Maybe<Array<Maybe<Post>>>,
};
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.
To run this project locally:
- Use Node >= 10
- Make sure that you have the latest Yarn version (https://yarnpkg.com/lang/en/docs/install/)
- Clone this repo using
git clone - Run
yarnon the root dir (it has a Yarn workspace defined, so all the packages dependencies will be installed) - Run
yarn buildto build all core packages and plugins - Run
yarn testto make sure everything works
License
MIT