Git Product home page Git Product logo

graphql-code-generator's Introduction

GraphQL Code Generator

npm version CircleCI 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 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:

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;
}

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 >= 8
  • Make sure that you have the latest Yarn version (https://yarnpkg.com/lang/en/docs/install/)
  • Clone this repo using git clone
  • Run yarn on the root dir (it has a Yarn workspace defined, so all the packages dependencies will be installed)
  • Run yarn build to build all core packages and plugins
  • Run yarn test to make sure everything works

License

GitHub license

MIT

graphql-code-generator's People

Contributors

adelsz avatar anthonyzou avatar ardatan avatar dab0mb avatar darkbasic avatar darthtrevino avatar davidyaha avatar ddeath avatar dotansimha avatar fredyc avatar greenkeeper[bot] avatar jonaskello avatar jontem avatar justinjiadev avatar jycouet avatar kamilkisiela avatar leonardfactory avatar lucasavila00 avatar mariusmarais avatar martinpavlik avatar michaelchiche avatar micimize avatar rarkins avatar reconbot avatar renovate-bot avatar renovate[bot] avatar sgoll avatar xanf avatar zanettin avatar zephraph avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.