Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

website: Update Gatsby's guide #7909

Merged
merged 1 commit into from
Jun 27, 2022
Merged

website: Update Gatsby's guide #7909

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 3 additions & 28 deletions website/docs/integrations/gatsby.mdx
View file
Open in desktop
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)