Skip to content
Snippets Groups Projects
user avatar
Hyeseong Kim authored
f65f6591
History

gatsby-plugin-typegen

Watch changes, Automatically generates TypeScript definitions.

  • Schema extraction
  • Generates code using graphql-codegen
  • Options to customize paths
  • Auto-fixing codes using <StaticQuery> and useStaticQuery() with generated type parameters.

Requirements

  • Node v10.0.0 +
  • GatsbyJS v2 +

Install

yarn add gatsby-plugin-typegen

# or
# npm install --save gatsby-plugin-typegen

How to use

// In your gatsby-config.js
plugins: [`gatsby-plugin-typegen`]

Also you can customize output path of generated files

// Example of type-safe usage (optional)
import { PluginOptions as TypegenPluginOptions } from 'gatsby-plugin-typegen';

type Plugin = (
  | string
  | { resolve: string, options: any }
  | { resolve: `gatsby-plugin-typegen` options: TypegenPluginOptions }
);

const plugins: Plugin[] = {
  resolve: `gatsby-plugin-typegen`,
  options: {
    schemaOutputPath: `${__dirname}/.cache/caches/gatsby-plugin-typegen/schema.json`,
    typeDefsOutputPath: `${__dirname}/node_modules/generated/types/gatsby.ts`,
  },
};

module.exports = {
  plugins,
};

Available options

  • schemaOutputPath: (string?) Path to where the schema file is being generated.

  • typeDefsOutputPath: (string?) Path to where the type definition file is being generated.

Acknowledgements