orta / gatsby-plugin-codegen

Wrapper of apollo:codegen to generate client side types from your queries as well as the gatsby schema & apollo config to provide autocomplete with apollographql.vscode-apollo

gatsby-plugin-codegen

Generate Typescript/Flow definitions from your gatsby queries.

Export schema and apollo config file to give autocomplete feature in vscode through apollographql.vscode-apollo (https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo).

Install

npm install --save gatsby-plugin-codegen

How to use

// In your gatsby-config.js
plugins: [
  // other plugins
  {
    resolve: "gatsby-plugin-codegen",
    options: {}
  }
];

Available options

Please check the documentation of apollo tooling (https://www.npmjs.com/package/apollo) for further explanation. This plugin creates an apollo config file (apolloConfigFile), a file from the gatsby schema (localSchemaFile) and the directory for the generated types (output).

export interface PluginCodegenOptions {
  // Name of the generated apollo config file
  apolloConfigFile?: string;

  // apollo:codegen options configured for usage with gatsby, see defaultOptions
  addTypename?: boolean;
  excludes?: string[];
  includes?: string[];
  localSchemaFile?: string;
  output?: string;
  tsFileExtension?: string;
  watch?: boolean;
  tagName?: string;
  target?: "typescript" | "swift" | "flow" | "scala";

  // apollo:codegen additional options
  globalTypesFile?: string;
  mergeInFieldsFromFragmentSpreads?: boolean;
  namespace?: string;
  outputFlat?: boolean;
  passthroughCustomScalars?: boolean;
  useFlowExactObjects?: boolean;
  useReadOnlyTypes?: boolean;

  // Gatsby specific, not used in this plugin
  plugins?: unknown[];
}

const defaultOptions = {
  apolloConfigName: "apollo.config.js",
  addTypename: false,
  excludes: [],
  localSchemaFile: "schema.json",
  output: "__generated__",
  target: "typescript",
  tagName: "graphql",
  tsFileExtension: "d.ts",
  includes: [
    "./src/**/*.tsx",
    "./src/**/*.ts",
    "./node_modules/gatsby-source-contentful/src/*.js",
    "./node_modules/gatsby-transformer-sharp/src/*.js",
    "./node_modules/gatsby-image/src/*.js"
    // "./node_modules/gatsby-*/**/*.js" Direct includes prefered, because of performance reasons
  ],
  watch: process.env.NODE_ENV === "production" ? false : true
};