The Guild LogoThe Guild Monogram

GraphQL Code Generator

Generate anything from GraphQL schema / operations!

Contact Us


yarn add @graphql-codegen/typed-document-node

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

With the typed-document-node plugin you no longer need to reconfigure, and install different GraphQL Code Generator plugins to manage all your GraphQL client hooks. Generate a single TypedDocumentNode and pass it to your GraphQL client of choice.

This plugin also generates less boilerplate code for your GraphQL operations.

Watch Episode #41 of for a quick introduction to using this plugin with GraphQL Code Generator:

Usage example#

schema: SCHEMA_FILE_OR_ENDPOINT_HERE documents: './src/**/*.graphql' generates: ./src/graphql-operations.ts: plugins: - 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: { ... } } ] }

This plugin also requires typescript and typescript-operations.

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

Package Details