TypedDocumentNode

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

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":{ ... ]};