# GraphQL Code Generator

> Generate typed code from GraphQL schemas and operations: clients, resolvers, SDKs and more, through a plugin ecosystem.

## Documentation

- [Introduction](https://the-guild.dev/graphql/codegen/docs/getting-started.md): 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.
- [Installation](https://the-guild.dev/graphql/codegen/docs/getting-started/installation.md): 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.
- [Development workflow](https://the-guild.dev/graphql/codegen/docs/getting-started/development-workflow.md): How to integrate GraphQL Code Generator into your development workflow. Learn how to run it in watch mode, or as part of your CI flow.
- [ESM TypeScript usage](https://the-guild.dev/graphql/codegen/docs/getting-started/esm-typescript-usage.md): How to use ESM with TypeScript. ESM is an important step in the JavaScript ecosystem because it allows static analysis of the dependency tree.
- [Vanilla TypeScript](https://the-guild.dev/graphql/codegen/docs/guides/vanilla-typescript.md): Execute GraphQL queries type-safe in vanilla TypeScript with GraphQL Code Generator.
- [React Query](https://the-guild.dev/graphql/codegen/docs/guides/react-query.md): Execute GraphQL queries type-safe in React Query with GraphQL Code Generator.
- [React / Vue](https://the-guild.dev/graphql/codegen/docs/guides/react-vue.md): GraphQL Code Generator is a tool that generates code from your GraphQL schema and operations. It can generate TypeScript, Flow, Swift, Kotlin, and more.
- [Angular](https://the-guild.dev/graphql/codegen/docs/guides/angular.md): GraphQL Code Generator provides the @graphql-codegen/typescript-apollo-angular plugin that generates full-typed Apollo GraphQL services.
- [Svelte / Kit](https://the-guild.dev/graphql/codegen/docs/guides/svelte.md): Generate typed code for SvelteKit and Apollo. GraphQL Code Generator and the community provide typed code generation for Apollo, SvelteKit _native_, and other clients.
- [Dart/Flutter](https://the-guild.dev/graphql/codegen/docs/guides/flutter-freezed.md): Boost 🚀 your development of Dart/Flutter apps using a GraphQL API by generating models directly from your GraphQL Schema.
- [Apollo Server / GraphQL Yoga](https://the-guild.dev/graphql/codegen/docs/guides/graphql-server-apollo-yoga.md): GraphQL Code Generator's `@graphql-codegen/typescript-resolvers` plugin generates TypeScript types for your GraphQL API's resolvers.
- [Apollo Server / GraphQL Yoga with Server Preset](https://the-guild.dev/graphql/codegen/docs/guides/graphql-server-apollo-yoga-with-server-preset.md): GraphQL Code Generator's server preset, `@eddeee888/gcg-typescript-resolver-files`, helps GraphQL APIs work at any scale by enforcing best practices such as type-safety and schema module conventions.
- [API Testing](https://the-guild.dev/graphql/codegen/docs/guides/api-testing.md): GraphQL Code Generator can generate typed results for your GraphQL operations. This tutorial uses GraphQL Yoga, but the practices are applicable to testing any GraphQL server.
- [GraphQL Modules](https://the-guild.dev/graphql/codegen/docs/guides/graphql-modules.md): GraphQL Code Generator's `@graphql-codegen/graphql-modules-preset` plugin helps to generate resolvers type for each module of a GraphQL Modules GraphQL API.
- [Further Reading](https://the-guild.dev/graphql/codegen/docs/guides/further-reading.md): GraphQL Code Generator is a tool for generating code from your GraphQL schema and operations. It's a great way to get type-safety and auto-completion in your code.
- [codegen.ts](https://the-guild.dev/graphql/codegen/docs/config-reference/codegen-config.md): Learn how to configure GraphQL Code Generator to generate code from your GraphQL schema and documents.
- [schema field](https://the-guild.dev/graphql/codegen/docs/config-reference/schema-field.md): How to specify your GraphQL Schema in GraphQL Code Generator. Learn how to load your schema from a remote server, local file, or multiple files.
- [documents field](https://the-guild.dev/graphql/codegen/docs/config-reference/documents-field.md): Learn how to specify the documents field in your GraphQL Code Generator config file.
- [plugin config](https://the-guild.dev/graphql/codegen/docs/config-reference/config-field.md): Learn how to configure GraphQL Code Generator to fit your needs. The `config` field is used to pass configuration to Plugins.
- [require field](https://the-guild.dev/graphql/codegen/docs/config-reference/require-field.md): Learn how to use the require field to load external files without transpiling them.
- [Naming Convention](https://the-guild.dev/graphql/codegen/docs/config-reference/naming-convention.md): GraphQL Code Generator is a tool for generating code from GraphQL schema and operations.
- [Lifecycle Hooks](https://the-guild.dev/graphql/codegen/docs/config-reference/lifecycle-hooks.md): Learn how to use the GraphQL Code Generator CLI to generate code from your GraphQL schema and operations.
- [Multi Project](https://the-guild.dev/graphql/codegen/docs/config-reference/multiproject-config.md): Learn how to use GraphQL Code Generator with multiple projects in the same config file.
- [Generated files colocation](https://the-guild.dev/graphql/codegen/docs/advanced/generated-files-colocation.md): Generate types near your GraphQL operations. Colocate your generated files with your original GraphQL operations.
- [Programmatic Usage](https://the-guild.dev/graphql/codegen/docs/advanced/programmatic-usage.md): GraphQL Code Generator also provides a complete programmatic API. The programmatic API can be used if you need to customize the execution flow or write a tool that uses the codegen.
- [How does it work?](https://the-guild.dev/graphql/codegen/docs/advanced/how-does-it-work.md): GraphQL Introspection allows fetching the types defined in the target GraphQL API. GraphQL AST allows to navigate through both client-side operations and remote schema types.
- [Profiler](https://the-guild.dev/graphql/codegen/docs/advanced/profiler.md): GraphQL Code Generator CLI provides a flag that enables the profiler mode. This allows you to identify performance bottlenecks in your codegen configuration.
- [Document Transform](https://the-guild.dev/graphql/codegen/docs/advanced/document-transform.md): Document transform is a feature that allows you to modify documents before they are used by plugins.
- [VSCode Extension](https://the-guild.dev/graphql/codegen/docs/integrations/vscode.md): Code generation for your GraphQL operations. Generate code from your GraphQL queries, mutations, subscriptions, fragments, and schema.
- [Prettier & Linters](https://the-guild.dev/graphql/codegen/docs/integrations/prettier.md): Learn how to use Prettier and other linters with GraphQL Code Generator to apply your custom code style and formatting rules.
- [Apollo Federation](https://the-guild.dev/graphql/codegen/docs/integrations/federation.md): Generate TypeScript resolvers signatures for your GraphQL schema. Supports Apollo Federation.
- [apollo-local-state](https://the-guild.dev/graphql/codegen/docs/integrations/apollo-local-state.md): Apollo Local State. Suppose you are using apollo-client >2.5 or older, with apollo-link-state to manage your app state with GraphQL. In that case, you're probably using a client-side only GraphQL schema and client-side directives such as `@client`.
- [create-react-app](https://the-guild.dev/graphql/codegen/docs/integrations/create-react-app.md): Codegen for React Apollo with TypeScript. Generates React Hooks and TypeScript types.
- [Gatsby](https://the-guild.dev/graphql/codegen/docs/integrations/gatsby.md): GraphQL Code Generator is a tool for generating code based on your GraphQL schema and operations.
- [What are Plugins?](https://the-guild.dev/graphql/codegen/docs/custom-codegen.md): The general purpose of GraphQL Code Generator is to parse GraphQL syntax, transform it into an AST and then output it into desired formats which can vary.
- [Plugin structure](https://the-guild.dev/graphql/codegen/docs/custom-codegen/plugin-structure.md): Learn how to write your own GraphQL Code Generator Plugin. You can use it to generate custom output, or to extend the existing plugins.
- [Validate Configuration](https://the-guild.dev/graphql/codegen/docs/custom-codegen/validate-configuration.md): Learn how to create your own plugins for GraphQL Code Generator. You can use plugins to generate code, documents, or even to modify the schema.
- [Extend Schema](https://the-guild.dev/graphql/codegen/docs/custom-codegen/extend-schema.md): Learn how to create a custom plugin for GraphQL Code Generator. How to extend the GraphQL Schema?
- [Using Visitor Pattern](https://the-guild.dev/graphql/codegen/docs/custom-codegen/using-visitor.md): Learn how to write your own plugins for GraphQL Code Generator. Most of the codegen's plugins are written with a design-pattern called Visitor.
- [Contributing](https://the-guild.dev/graphql/codegen/docs/custom-codegen/contributing.md): Create a new GraphQL Code Generator plugin for your favorite language or platform.
- [GraphQL-CLI Deprecation](https://the-guild.dev/graphql/codegen/docs/migration/graphql-cli.md)
- [v0.18 -> v1.0](https://the-guild.dev/graphql/codegen/docs/migration/from-0-18.md): Migrating to 1.0.0. What has changed? How to migrate? What are the new features?
- [v0.13 -> v0.17](https://the-guild.dev/graphql/codegen/docs/migration/from-0-13.md): Migrating from 0.13 to 0.18. What has changed? How to migrate? What are the new features?
- [v4.0 -> v5.0](https://the-guild.dev/graphql/codegen/docs/migration/from-4-0.md): Migrating to 5.0.0. What has changed? How to migrate? What are the new features?
- [typescript-operations and client-preset v5.0 -> v6.0](https://the-guild.dev/graphql/codegen/docs/migration/operations-and-client-preset-from-5-0.md): Migrating `typescript-operations` and `client-preset` from v5 to v6. What has changed? How to migrate? What are the new features?
- [Apollo Tooling -> GraphQL Code Generator](https://the-guild.dev/graphql/codegen/docs/migration/apollo-tooling.md): Migrating from Apollo-tooling (apollo client:codegen) to GraphQL Code Generator. What has changed? How to migrate? What configuration options replace apollo-tooling's behaviour?

## Plugins and presets

- [named-operations-object](https://the-guild.dev/graphql/codegen/plugins/typescript/named-operations-object.md): Generates an object containing a list of all your GraphQL operations and fragments. This is useful if you are using Apollo-Client and wish to have type validation when you are using `refetchQueries`.
- [relay-operation-optimizer](https://the-guild.dev/graphql/codegen/plugins/typescript/relay-operation-optimizer.md): A GraphQL Codegen feature for bringing the benefits of Relay Compiler to any GraphQL Client using Relay Operation Optimizer.
- [typed-document-node](https://the-guild.dev/graphql/codegen/plugins/typescript/typed-document-node.md): Generate TypedDocumentNode for GraphQL operations. This plugin is a wrapper for graphql-typed-document-node.
- [typescript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript.md): TypeScript plugin. Adds support for TypeScript.
- [apollo-angular](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-apollo-angular.md): GraphQL Code Generator plugin for Angular services using Apollo Angular. It generates Angular services with observables and typed variables.
- [apollo-client-helpers](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-apollo-client-helpers.md): Generates helpers for improving the integration of TypeScript and Apollo-Client, based on your schema. This plugin generates fully-typed keyFields and Type-Policies for Apollo-Client.
- [apollo-next](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-apollo-next.md): Apollo Client plugin for GraphQL Code Generator. Generates React Apollo HOC and React Hooks.
- [document-nodes](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-document-nodes.md): Generate TypeScript code for GraphQL documents. Useful for GraphQL codegen.
- [fabbrica](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-fabbrica): GraphQL Code Generator Plugin to define mock data factory.
- [generic-sdk](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-generic-sdk.md): Generate TypeScript SDK for GraphQL APIs. Supports Apollo Client, React Query, and more.
- [graphql-files-modules](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-graphql-files-modules.md): GraphQL Code Generator plugin for generating TypeScript types for GraphQL files. This plugin generates a single file per GraphQL file, and uses the `graphql-tag/loader` to load the GraphQL files.
- [graphql-request](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-graphql-request.md): GraphQL Code Generator plugin for generating TypeScript code using graphql-request. This plugin generates a fully-typed SDK based on your GraphQL operations.
- [mongodb](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-mongodb.md): GraphQL Code Generator plugin for generating TypeScript types for MongoDB models. This plugin generates TypeScript types for MongoDB models, which makes it relevant for server-side development only. It uses GraphQL directives to declare the types you want to generate and use in your MongoDB backend.
- [msw](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-msw.md): TypeScript-MSW - Mock GraphQL requests with MSW.
- [oclif](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-oclif.md): Generate a Typescript Oclif CLI. This plugin is based on the official Typescript plugin.
- [nhost](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-nhost.md): GraphQL Code Generator plugin for Nhost Typescript SDK. It generates the schema for the Typescript Nhost SDK.
- [operations](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-operations.md): Generate TypeScript operations from GraphQL queries. This plugin is based on the `typescript` plugin, but it generates operations instead of types.
- [react-apollo](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-react-apollo.md): GraphQL Code Generator plugin for TypeScript and React Apollo. Generates React Hooks and HOCs for your GraphQL operations.
- [react-query](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-react-query.md): GraphQL Code Generator plugin for generating React Query hooks. Supports TypeScript and Flow.
- [resolvers](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-resolvers.md): Generate TypeScript resolvers types. Works with graphql-tools and apollo-server. Supports custom mappers and enum resolvers.
- [rtk-query](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-rtk-query.md): RTK Query codegen plugin for GraphQL. Generates React Hooks for GraphQL queries and mutations. Works with any GraphQL client.
- [stencil-apollo](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-stencil-apollo.md): A Stencil plugin for generating TypeScript code from GraphQL queries. This plugin uses Apollo Client.
- [svelte-apollo](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-svelte-apollo.md): This plugin generates observable Apollo queries with Typescript typings. This is a community plugin, to report eventual issues or find more examples, refer to this repository
- [type-graphql](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-type-graphql.md): Generate TypeScript types for use with TypeGraphQL. This plugin is similar to the basic TypeScript plugin. However, this package generates types that can be used by TypeGraphQL to generate a GraphQL schema. This is especially useful if you are building a service that is a gateway to multiple downstream GraphQL services, or otherwise combining GraphQL schemas. In this case, this plugin can be used to re-expose types defined in downstream GraphQL services without redefining them as TypeGraphQL objects. This plugin should be compatible with other client-side plugins, such as typescript-operations.
- [urql](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-urql.md): GraphQL codegen plugin for generating TypeScript code using urql. This plugin generates React Hooks and TypeScript types.
- [validation-schema](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-validation-schema.md): A plugin for GraphQL Codegen to generate form validation schema (such as yup, zod) based on your GraphQL schema for use in a client application.
- [vue-apollo](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-vue-apollo.md): GraphQL Code Generator plugin for Vue Apollo. It generates Vue Apollo hooks and TypeScript types. It also generates a Vue plugin that can be used to register the generated hooks as global components.
- [vue-apollo-smart-ops](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-vue-apollo-smart-ops.md): A Vue plugin for Apollo GraphQL with smart operations. It generates Vue composition functions for your GraphQL queries and mutations.
- [vue-urql](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-vue-urql.md): GraphQL Code Generator plugin for Vue.js and urql. It generates Vue.js components and urql hooks. It also generates TypeScript types.
- [typescript-mock-data](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-mock-data): Generate mock data for your TypeScript types. Useful for testing and prototyping.
- [client-preset](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client.md): The client preset provides typed GraphQL operations (Query, Mutation and Subscription) by perfectly integrating with your favorite GraphQL clients.
- [graphql-modules](https://the-guild.dev/graphql/codegen/plugins/presets/graphql-modules-preset.md): GraphQL Code Generator preset for graphql-modules. It generates a single file with all the modules and their dependencies.
- [import-types](https://the-guild.dev/graphql/codegen/plugins/presets/import-types-preset.md): This preset generates a file per each operation file, and allow to import types from another file.
- [near-operation-file](https://the-guild.dev/graphql/codegen/plugins/presets/near-operation-file-preset.md): GraphQL Code Generator - Near Operation File Preset. Generates a file per each operation file.
- [java](https://the-guild.dev/graphql/codegen/plugins/java/java.md): Java plugin. Generate Java classes from your GraphQL schema. Use it in your resolvers.
- [java-apollo-android](https://the-guild.dev/graphql/codegen/plugins/java/java-apollo-android.md): GraphQL Code Generator plugin for generating Java code for Apollo Android.
- [java-resolvers](https://the-guild.dev/graphql/codegen/plugins/java/java-resolvers.md): Java Resolvers Plugin. Generate Java interfaces for your resolvers. Works with graphql-java library.
- [kotlin](https://the-guild.dev/graphql/codegen/plugins/java/kotlin.md): Kotlin plugin for GraphQL Code Generator. Generate Kotlin classes for Enums and Input types.
- [operations](https://the-guild.dev/graphql/codegen/plugins/c-sharp/c-sharp-operations.md): C# operations plugin. Generates C# methods for the resolvers' signature. Works with GraphQL.
- [operations](https://the-guild.dev/graphql/codegen/plugins/flow/flow-operations): Flow Operations plugin. This plugin allows you to create and manage operations in your Flow blockchain.
- [resolvers](https://the-guild.dev/graphql/codegen/plugins/flow/flow-resolvers.md): Flow plugin for GraphQL Code Generator. Generates Flow types for your GraphQL resolvers.