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


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



  • 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



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