gatsby-plugin-generate-types

Experimental gatsby plugin that generate typescript types for pages / templates with graphql data. Designed to work well for VSCode users without actually making your project typescript.

It works by generating a schema.json with the method from gatsby-plugin-extract-schema. It then runs apollo codegen insidegatsby develop/gatsby build.

How to use

Install

yarn add gatsby-plugin-generate-types

Edit gatsby-config.js

module.exports = {
  plugins: ["gatsby-plugin-generate-types"]
};

or, if you want to generate types as part of productio builds

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-generate-types",
      options: {
        inProduction: true
      }
    }
  ]
};

Add type imports

Type files will be generated in a _types folder relative to your source files.

The package includes a helper page Type which takes the imported graphql type as an argument. You can use it in javascript files for function page / template components by adding just one line like this:

/** @type {import("gatsby-plugin-generate-types").page<import("./_types/IndexQuery").IndexQuery>} */
const IndexPage = ({ data }) => {
  //...
};

export const pageQuery = graphql`
  query IndexQuery {
    ...
  }
`;

Use Apollo VSCode

The apollo VSCode extension, combined with this plugin (or just gatsby-plugin-extract-schema) can provide validation and autocomplete for all your page and static queries.

Install the extension from the Marketplace and add the following apollo.config.js to your project:

module.exports = {
  client: {
    tagName: "graphql",
    service: {
      name: "your-gatsby-site",
      localSchemaFile: "./schema.json"
    }
  }
};

gitignore generated files

It’s a matter of taste wether you want to commit the generated types and schema to git or not. If you don’t, add this to your .gitignore

schema.json
_types

Roadmap

• generate directly usable page component types
• maybe: add type annotations directly to files
• don’t run apollo codegen as shell command but use apollo-codegen-typescript package and maybe rely on gatsby watching

Changelog

1.0

• skip running in production build by default, unless inProduction option is specified

0.01

HI