@lightspeed/apollo-generate-types

Introduction

Generate TypeScript types for GraphQL queries based on a schema, with a watch command to auto-update on changes.

Quick start

Install

Install dependency in your app:

yarn add @lightspeed/apollo-generate-types -D

Usage

yarn apollo-generate-types [--output=<dir>] [--output-filename=<filename>] [--watch] --schema=<GraphQLSchemaPath> [globFiles]

We recommend creating an npm script to run the command. In your package.json inside scripts:

"gql:generate-types": "apollo-generate-types --schema=./src/__generated__/graphql-schema.graphql 'src/**/*.ts,src/**/*.tsx'"

You can then call yarn gql:generate-types to generate types based on the schema.

Running with watch mode

For development, we recommend running the gql:generate-types script in watch mode:

"dev": "NODE_ENV=development nodemon server.js && yarn gql:generate-types --watch"

Whenever a query is added to a .ts or .tsx file a type file will be generated in the output dir. For example:

const GET_PRODUCTS = gql`
  query getProducts($term: String) {
    products(term: $term, pageSize: 5) {
      edges {
        node {
          id
          name
        }
      }
    }
  }
`;

Will generate a src/__generated__/getProducts.ts file with types for this query.

Options

| Name | Required | Default | Description | | ------------------------------ | -------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | --schema=<GraphQLSchemaPath> | Yes | - | Path to GraphQL schema file | | --output=<dir> | No | src/__generated__/ | Path where files will be generated | | --output-filename=<file> | No | <graphql-schema-file-name>-types.ts | Name of the generated files for full schema types | | --watch | No | - | If a file containing a gql query or the schema changes, types will be re-generated | | [globFiles] | No | - | Files to look for gql queries. It can be a glob parameter. If no files is set, then the process will only watch the schema |

Examples

yarn apollo-generate-types --schema=schema.graphql 'src/**/*.ts,src/**/*.tsx'

yarn apollo-generate-types --output=generated --watch --schema=schema.graphql 'src/**/*.ts,src/**/*.tsx'

yarn apollo-generate-types --schema=schema.graphql

FAQ

1. Q: I have the error GraphQLError: Cannot query field "XXXX" on type "Query" when I run the command.

   A: It's an issue with your graphql package in your project. It must be graphql >=14.4.2