All Plugins

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. Since there can potentially be an infinite number of formats, we can't predict them all. However, some formats are more likely to be used, thus, we've prepared pre-defined code generation plugins which are built for these formats.

Available Plugins#

Below is a table that lists all available plugins which can be installed via NPM, along with a short description. If you're looking for anything specific, we might already have the solution:

Format	Purpose	Package Name & Docs
`typescript`	Generate types for TypeScript - those are usually relevant for both client side and server side code	`@graphql-codegen/typescript`
`typescript-operations`	Generate client specific TypeScript types (query, mutation, subscription, fragment)	`@graphql-codegen/typescript-operations`
`typescript-resolvers`	Generate TypeScript signature for server-side resolvers	`@graphql-codegen/typescript-resolvers`
`typed-document-node`	Generate typed `DocumentNode` to by used with supporting libraries	`@graphql-codegen/typed-document-node`
`typescript-apollo-client-helpers`	Generates helpers for better integration of Apollo-Client v3 and TypeScript	`@graphql-codegen/typescript-apollo-client-helpers`
`typescript-react-query`	Generates ready-to-use React Hooks for `react-query` library	`@graphql-codegen/typescript-react-query`
`typescript-apollo-angular`	Generate TypeScript types, and Apollo-Angular Services	`@graphql-codegen/typescript-apollo-angular`
`typescript-react-apollo`	Generate TypeScript types, and React-Apollo Components	`@graphql-codegen/typescript-react-apollo`
`typescript-vue-apollo`	Generate TypeScript types, and Vue Apollo composition functions	`@graphql-codegen/typescript-vue-apollo`
`typescript-urql`	Generate TypeScript types, and Urql Components	`@graphql-codegen/typescript-urql`
`typescript-graphql-request`	Generates fully-typed ready-to-use SDK for graphql-request	`@graphql-codegen/typescript-graphql-request`
`typescript-generic-sdk`	Generates fully-typed generic SDK you can hook into any client.	`@graphql-codegen/typescript-generic-sdk`
`typescript-stencil-apollo`	Generate TypeScript types, and Stencil Apollo Components	`@graphql-codegen/typescript-stencil-apollo`
`typescript-mongodb`	Generate server-side TypeScript types, with MongoDB models	`@graphql-codegen/typescript-mongodb`
`typescript-graphql-files-modules`	Generate `declare module` for `.graphql` files	`@graphql-codegen/typescript-graphql-files-modules`
`typescript-document-nodes`	Generate TypeScript source files files that use `graphql-tag`	`@graphql-codegen/typescript-document-nodes`
`typescript-type-graphql`	Generate TypeScript types compatible with TypeGraphQL	`@graphql-codegen/typescript-type-graphql`
`typescript-oclif`	Generate commands for oclif command line interfaces	`@graphql-codegen/typescript-oclif`
`add`	Add any string that you wish to the output file	`@graphql-codegen/add`
`schema-ast`	Prints the merged schemas as AST	`@graphql-codegen/schema-ast`
`fragment-matcher`	Generates an introspection result with only Unions and Interfaces	`@graphql-codegen/fragment-matcher`
`named-operations-object`	Generates a type-safe list of all your available GraphQL operations and fragments	`@graphql-codegen/named-operations-object`
`introspection`	Generates an introspection result	`@graphql-codegen/introspection`
`time`	Add the generation time to the output file	`@graphql-codegen/time`
`flow`	Generate types for Flow type based on your GraphQL schema	`@graphql-codegen/flow`
`flow-resolvers`	Generate resolvers signature for Flow	`@graphql-codegen/flow-resolvers`
`flow-operations`	Generate types for Flow type based on your GraphQL operations	`@graphql-codegen/flow-operations`
`reason-client`	Generate ReasonML types based on your GraphQL schema for use in a client application	`@graphql-codegen/reason-client`
`kotlin`	generates Kotlin backend `classes` for Enums and Input types	`@graphql-codegen/kotlin`
`java`	generates Java backend `classes` for Enums and Input types	`@graphql-codegen/java`
`java-resolvers`	generates Java backend resolvers signature	`@graphql-codegen/java-resolvers`
`java-apollo-android`	generates Apollo Android parsers and mappers	`@graphql-codegen/java-apollo-android`
Scala Plugins	generates types for schema and operations, maintained by `aappddeevv`	`@aappddeevvv/graphql-code-scala-operations`,`@aappddeevvv/graphql-code-scala-schema`
`apollo-typed-documents`	Generates `declare module` for `.graphql` files with generic `TypedDocumentNode<TVariables, TData>`. Also generates helper function to create mocks for Apollo Client `MockedProvider`. Maintained by `rubengrill`	`apollo-typed-documents/lib/codegenTypedDocuments`,`apollo-typed-documents/lib/codegenApolloMock`
`@homebound/graphql-typescript-factories`	Generates factory methods for use in client-side GraphQL tests that are stubbing/mocking out GraphQL responses.	`homebound-team/graphql-typescript-factories`
`@homebound/graphql-typescript-simple-resolvers`	generates types for implementing an Apollo-/graphql-style implementation in TypeScript.	`homebound-team/graphql-typescript-simple-resolvers`
`@homebound/graphql-typescript-resolver-scaffolding`	The generated scaffolds are extremely simple, and really just placeholders for your business logic and tests.	`homebound-team/graphql-typescript-resolver-scaffolding`

In addition, you can build your own code generating plugins based on your specific needs. For more information, check this doc page.

How to use Plugins#

To use a plugin, install its package from npm, then add it to your YML config file:

schema: my-schema.graphql
generates:
  output.ts:
    - plugin-name-here

Configure Plugins#

To pass configuration to a plugin, do the following:

schema: my-schema.graphql
generates:
  output.ts:
    - plugin-name-here:
        configKey: configValue

You can also pass the same configuration value to multiple plugins:

schema: my-schema.graphql
generates:
  output.ts:
    config:
      configKey: configValue
    plugins:
      - plugin1-name-here
      - plugin2-name-here

You can find the supported configuration for each plugin in its page / README file.