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.

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

chore(gatsby-source-graphql): docs on how to use apollo links #28686

Merged
merged 8 commits into from
Dec 22, 2020
Merged
Changes from all commits
Commits
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
58 changes: 58 additions & 0 deletions packages/gatsby-source-graphql/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,64 @@ module.exports = {
}
```

## Composing Apollo Links for production network setup
meganesu marked this conversation as resolved.
Show resolved Hide resolved

Network requests can fail, return errors or take too long. Use [Apollo Link](https://www.apollographql.com/docs/link/) to
add retries, error handling, logging and more to your GraphQL requests.

Copy link
Contributor

Choose a reason for hiding this comment

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

Could you add something about what the parameters are for the createLink option?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've added a comment in the example. We also have some examples of this option at the beginning of the readme.

Use the plugin's `createLink` option to add a custom Apollo Link to your GraphQL requests.

You can compose different types of links, depending on the functionality you're trying to achieve.
The most common links are:

- `apollo-link-retry` for retrying queries that fail or time out
- `apollo-link-error` for error handling
- `apollo-link-http` for sending queries in http requests (used by default)

For more explanation of how Apollo Links work together, check out this Medium article: [Productionizing Apollo Links](https://medium.com/@joanvila/productionizing-apollo-links-4cdc11d278eb).

Here's an example of using the HTTP link with retries (using [apollo-link-retry](https://www.npmjs.com/package/apollo-link-retry)):

```js
// gatsby-config.js
const { createHttpLink } = require(`apollo-link-http`)
const { RetryLink } = require(`apollo-link-retry`)

const retryLink = new RetryLink({
delay: {
initial: 100,
max: 2000,
jitter: true,
},
attempts: {
max: 5,
retryIf: (error, operation) =>
Boolean(error) && ![500, 400].includes(error.statusCode),
},
})

module.exports = {
plugins: [
{
resolve: "gatsby-source-graphql",
options: {
typeName: "SWAPI",
fieldName: "swapi",
url: "https://api.graphcms.com/simple/v1/swapi",

// `pluginOptions`: all plugin options
// (i.e. in this example object with keys `typeName`, `fieldName`, `url`, `createLink`)
createLink: pluginOptions =>
ApolloLink.from([
retryLink,
createHttpLink({ url: pluginOptions.url }),
]),
},
},
],
}
```

## Custom transform schema function (advanced)

It's possible to modify the remote schema, via a `transformSchema` option which customizes the way the default schema is transformed before it is merged on the Gatsby schema by the stitching process.
Expand Down