Skip to main content


Usage Requirements

In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (query / mutation / subscription and fragment) set as documents: ... in your codegen.yml.

Without loading your GraphQL operations (query, mutation, subscription and fragment), you won't see any change in the generated output.

This plugins generates a ready-to-use TypedDocumentNode (a combination of pre-compiled DocumentNode and the TypeScript signature it represents).

For information about the setup and usage of TypedDocumentNode, please refer to the library's documentation.

This plugins requires typescript and typescript-operations as siblings.

Usage example#

documents: "./src/**/*.graphql"
- typescript
- typescript-operations
- typed-document-node

The example about will generate TypedDocumentNode with the needed types built-in, for example:

// Represents the variables type of the operation - generated by `typescript` + `typescript-operations` plugins
export type RatesQueryVariables = Exact<{
currency: Scalars['String'];
// Represents the result type of the operation - generated by `typescript` + `typescript-operations` plugins
export type RatesQuery = (
{ __typename?: 'Query' }
& { rates?: Maybe<Array<Maybe<(
{ __typename?: 'ExchangeRate' }
& Pick<ExchangeRate, 'currency' | 'rate'>
)>>> }
// Generated by this plugin - creates a pre-compiled `DocumentNode` and passes result type and variables type as generics
export const ratesQuery: TypedDocumentNode<RatesQuery, RatesQueryVariables> = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{ ... ]};