title | description |
---|---|
Quick Start |
GraphQL Code Generator is a plugin-based tool that helps you get the best out of your GraphQL stack. From back-end to front-end, GraphQL Code Generator automates the generation of typed Queries, Mutations and, Subscriptions for React, Vue, Angular, Next.js, Svelte, whether you are using Apollo Client, URQL or, React Query. |
import { Callout } from '@theguild/components'
Make sure that you add both the graphql
and @graphql-codegen/cli
packages in your project's dependencies:
npm i graphql
npm i -D typescript @graphql-codegen/cli
If you want watch mode support you need to add @parcel/watcher
as well:
npm i -D @parcel/watcher
If you are having issues with loading GraphQL-Codegen plugins, make sure it's installed correctly, at the same level of node_modules
, and make sure it's accessible and available for the Codegen CLI.
GraphQL Code Generator comes with dozens of plugins, from front-end to back-end, from web apps to mobile apps. If you are not sure which plugins might be helpful for your GraphQL stack, give a try at the Initialization Wizard.
Otherwise, you can start exploring the plugins and setting up them manually.
Once installed, GraphQL Code Generator CLI can help you configure your project based on some popular flows:
npx graphql-code-generator init
npm install # install the chosen packages
Question by question, it will guide you through the whole process of setting up a schema, selecting and installing plugins, picking a destination to where your files are generated, and a lot more.
Once GraphQL Code Generator is installed and added to your project's development workflow (scripts), you can start installing plugins and configuring them.
If you are looking for the best way to leverage GraphQL Code Generator on your stack, you should read one of our Guides.
We recommend using a client
preset that has a recommended configuration for the client applications. You can follow one of the following guides:
If your stack is not listed above, please refer to our plugins directory.