Skip to content

Commit

Permalink
chore(docs): Update migration guide to add more info about image reso…
Browse files Browse the repository at this point in the history
…lvers (#35105)

Co-authored-by: Lennart <lekoarts@gmail.com>
  • Loading branch information
natalyjazzviolin and LekoArts committed Mar 14, 2022
1 parent cd0b80c commit 4753cf9
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 73 deletions.
73 changes: 0 additions & 73 deletions docs/docs/reference/graphql-data-layer/schema-customization.md
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
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

0 comments on commit 4753cf9

Please sign in to comment.