Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


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



© 2023 Gatsby, Inc.