Skip to content

Commit

Permalink
website: Update Gatsby's guide (#7909)
Browse files Browse the repository at this point in the history
  • Loading branch information
LekoArts authored Jun 27, 2022
1 parent b661600 commit 6689baf
Showing 1 changed file with 3 additions and 28 deletions.
31 changes: 3 additions & 28 deletions website/docs/integrations/gatsby.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,12 @@ id: gatsby
title: Gatsby
---

If you build apps using [Gatsby](https://gatsbyjs.com), you can use GraphQL Code Generator to generate TypeScript types.
If you build apps using [Gatsby](https://gatsbyjs.com), you can use its built-in feature called [GraphQL Typegen](https://www.gatsbyjs.com/docs/how-to/local-development/graphql-typegen/). Under the hood it uses the GraphQL Code Generator to generate TypeScript types but you don't need to set anything up other than enabling an option.

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

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

```yaml
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 load your GraphQL operations from your source code and load all the internal fragments from `node_modules`.

<MDXWarning title="Note on `documents` section">
The glob expression above should get you started quickly, but note that it's vast and might load many files that match the `./node_modules/gatsby*/!(node_modules)/**/*.js` pattern.
If you are having issues with this glob expression, or if you see 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](https://github.com/dotansimha/graphql-code-generator/issues/5024)

</MDXWarning>
It also sets up everything needed for [GraphQL Config](https://www.graphql-config.com/).

## Community Plugins

There are also community Gatsby plugins that integrate with `@graphql-codegen`:
Gatsby's GraphQL Typegen feature is solving most common use cases. If you find yourself limited by its features you should open a feature request or trying using one of these community plugins:

- [gatsby-plugin-graphql-codegen](https://github.com/d4rekanguok/gatsby-typescript/tree/master/packages/gatsby-plugin-graphql-codegen)
- [gatsby-plugin-typegen](https://github.com/cometkim/gatsby-plugin-typegen)

1 comment on commit 6689baf

@vercel
Copy link

@vercel vercel bot commented on 6689baf Jun 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.