GraphQL Codegen TypeScript Schema Plugin

This plugin for GraphQL Code Generator allows you to import the schema from generated file(like typescript-document-nodes plugin, but for schema).

Traditionally, working with .graphql files required configuring a bundler loader and adjusting tsconfig settings. With this plugin, you can bypass those steps. You can just import schema object from the generated TypeScript file.

Installation

npm i -D graphql-codegen-typescript-schema

Usage

Add the plugin to your GraphQL Codegen configuration file:

schema: schema.graphql
generates:
  schema.ts:
    plugins:
      - typescript-schema # <-- this

It can be used with other typescript-* plugins;

schema: schema.graphql
generates:
  generated.ts:
    plugins:
      - typescript
      - typescript-resolvers
      - typescript-schema # <-- this

This will add an named export as schema to generated.ts.

Options

schemaRepresentation

This option specifies how the schema should be coded in the generated TypeScript file. It accepts two values:

• ast (default): Coded the schema as an AST object.
• dsl: Coded the schema as a DSL string.

For example,

schema: schema.graphql
generates:
  schema.ts:
    plugins:
      - typescript-schema
          schemaRepresentation: ast

This configuration will generate a file that looks like:

import { buildASTSchema } from 'graphql';

export const schema = buildASTSchema({
  kind: 'Document',
  definitions: [ ... ]
} as any);

Also,

schema: schema.graphql
generates:
  schema.ts:
    plugins:
      - typescript-schema
          schemaRepresentation: dsl

This configuration will generate a file that looks like:

import { buildSchema } from 'graphql';

export const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

The former style makes the generated file size bigger, but CPU time is considered slightly shorter. The latter style has a smaller file size, but requires parsing on loading.