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(docs): Update migration guide to add more info about image resolvers #35105

Merged
merged 3 commits into from
Mar 14, 2022
Merged
Show file tree
Hide file tree
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
73 changes: 0 additions & 73 deletions docs/docs/reference/graphql-data-layer/schema-customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -1100,76 +1100,3 @@ data.allTeamMember.nodes.map(node => {
```

> Note: All types implementing a queryable interface must also implement the `Node` interface

## Extending third-party types

So far, the examples have been dealing with types created from locally available data.
However, Gatsby also allows to integrate and modify third-party GraphQL schemas.

Usually, those third-party schemas are retrieved from remote sources via introspection
query with Gatsby's `gatsby-source-graphql` plugin. To customize types integrated from
a third-party schema, you can use the [`createResolvers`](/docs/reference/config-files/gatsby-node/#createResolvers) API.

### Feeding remote images into `gatsby-image`

As an example, you could look at [using-gatsby-source-graphql](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-source-graphql/gatsby-node.js) to see how you could use `createResolvers` to feed images from a CMS into `gatsby-image` (the assumption is that `gatsby-source-graphql` was configured
to prefix all types from the third-party schema with `CMS`):

```js:title=gatsby-node.js
exports.createResolvers = ({
actions,
cache,
createNodeId,
createResolvers,
store,
reporter,
}) => {
const { createNode } = actions
createResolvers({
CMS_Asset: {
imageFile: {
type: `File`,
resolve(source, args, context, info) {
return createRemoteFileNode({
url: source.url,
store,
cache,
createNode,
createNodeId,
reporter,
})
},
},
},
})
}
```

You create a new `imageFile` field on the `CMS_Asset` type, which will create `File`
nodes from every value on the `url` field. Since `File` nodes automatically have
`childImageSharp` convenience fields available, you can then feed the images from the CMS
into `gatsby-image` by querying:

```graphql
query {
cms {
post {
# In this example, the `post.image` field is of type `CMS_Asset`
image {
# It is important to include all fields in the query which you want to
# access in the resolver. In this example make sure to include
# the `url` field. In the future, Gatsby might provide a `@projection`
# extension to automatically include those fields.
url
imageFile {
childImageSharp {
fixed {
...GatsbyImageSharpFixed
}
}
}
}
}
}
}
```
2 changes: 2 additions & 0 deletions docs/docs/reference/release-notes/migrating-from-v3-to-v4.md
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,8 @@ The recommended approach is to always create nodes in `sourceNodes`. We are goin
this workaround that will work using `sourceNodes`. It is still being worked on, please post your use-cases and ideas
in [this discussion](https://github.com/gatsbyjs/gatsby/discussions/32860#discussioncomment-1262874) to help us shape this new APIs.

If you've used this with `gatsby-source-graphql`, please switch to [Gatsby GraphQL Source Toolkit](https://github.com/gatsbyjs/gatsby-graphql-toolkit). Generally speaking you'll want to create your own source plugin to fully support such use cases.

You can also learn more about this in the [migration guide for source plugins](/docs/reference/release-notes/migrating-source-plugin-from-v3-to-v4/#2-data-mutations-need-to-happen-during-sourcenodes-or-oncreatenode).

### Changes to built-in types
Expand Down