The Guild LogoThe Guild Monogram

Search docs

Search icon

Products by The Guild

Products

Hive logoHive blurred logo

Hive

Schema Registry for your GraphQL Workflows

Docs

GraphQL Code Generator

Generate anything from GraphQL schema / operations!

Contact Us

GatsbyJS#

If you are building apps using GatsbyJS, you can use GraphQL Code Generator to generate TypeScript types.

The codegen knows automatically to look for the import of the graphql tag for gatsby package.

Using the following config file, it should cover everything specific to Gatsby:

schema: http://localhost:8000/___graphql documents: - ./src/**/*.{ts,tsx} - ./node_modules/gatsby*/!(node_modules)/**/*.js generates: ./src/graphqlTypes.ts: plugins: - typescript - typescript-operations

Now, the codegen should be able to load your GraphQL operations from your source code, and also load all the internal fragments from node_modules.

Note on documents section#

The glob expression above should get you started quickly, but note that it's very broad and might load many files that matches the ./node_modules/gatsby*/!(node_modules)/**/*.js pattern. If you are having issues with this glob expression, or if you are seeing performance issues, please note that you need to narrow this expression to the bare minimum that is being loaded by your Gatsby instance.

This issue might help

Community Plugins#

There are also community Gatsby plugins that integrate with @graphl-codegen: