• Plugins
  • TypeScript
  • typed-document-node
Package nameWeekly DownloadsVersionLicenseUpdated
@graphql-codegen/typed-document-nodeDownloadsVersionLicenseSep 26th, 2022

Installation

yarn add -D @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).

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 graphql.wtf 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.

Last updated on September 29, 2022
relay-operation-optimizertypescript