Make sure that you add both the
@graphql-codegen/cli packages in your project's dependencies:
yarn add graphql yarn add -D typescript yarn add -D @graphql-codegen/cli
Please avoid installing
@graphql-codegen/cli, and its plugins as global dependencies. This will cause issues because of duplications of the
graphql package. Install it only locally in your project.
If you are using Monorepo setup (Lerna/Yarn Workspaces/anything else), please note that GraphQL Codegen is using
require to load plugins and files. This might break and fail in case of hoisting.
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 dozen 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.
Once installed, GraphQL Code Generator CLI can help you configure your project based on some popular flows:
yarn graphql-code-generator init yarn # 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.
On top of each plugin documentation, we provide one Guide for the most famous framework such as React or Apollo Server. Each guide exposes the best plugins and configurations available for each framework and stack (React with Apollo / URQL / React Query, Angular with Apollo, …).
Get started with our guides:
If your stack is not listed above, please refer to our plugins directory.