Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


This plugin uses graphql-codegen to automatically generate typings for the gatsby graphql schema and your graphql queries.

How to install

using yarn: yarn add gatsby-plugin-generate-typings in your gatsby-config.js add

      // automatically generate typings from graphql schema
      resolve: 'gatsby-plugin-generate-typings',
      options: {
        dest: './src/generated/graphql-types.d.ts',

to automatically generate ./src/generated/graphql-types.d.ts.

Available options

dest: the destination file name, where the typings will be written to.

When do I use this plugin?

When using gatsby-plugin-typescript it comes handy to have typings for your graphql schema and queries.

Examples of usage

When installed as above you can do

import { SiteTitleQueryQuery } from '../generated/graphql-types';

// ... somewhere in your render() function:

      query SiteTitleQuery {
        site {
          siteMetadata {
    render={(data: SiteTitleQueryQuery) => {

      // can use data.site.siteMetadata and have full Typescript Typings for it

© 2023 Gatsby, Inc.