The Guild LogoThe Guild Monogram

Search docs

Search icon

Products by The Guild

Products

Hive logoHive blurred logo

Hive

Schema Registry for your GraphQL Workflows

Docs

GraphQL Code Generator

Generate anything from GraphQL schema / operations!

Contact Us

TypedDocumentNode

yarn add @graphql-codegen/typed-document-node
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.

These plugins generate 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.

These plugins require 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: { ... } } ] }

Package Details