Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Extending WP GraphQL images with gatsby-image functionality
const { createRemoteFileNode } = require(`gatsby-source-filesystem`)
// Note that WPGraphQL_MediaItem depends on your gatsby-source-graphql typeName which is set in the config
exports.createResolvers = ({
actions,
cache,
createNodeId,
createResolvers,
store,
reporter,
}) => {
const { createNode } = actions
createResolvers({
WPGraphQL_MediaItem: {
imageFile: {
type: `File`,
resolve(source, args, context, info) {
return createRemoteFileNode({
url: source.sourceUrl,
store,
cache,
createNode,
createNodeId,
reporter,
})
},
},
},
})
}
// Note: Make sure to query sourceUrl, otherwise gatsby-image doesn't work
export const pageQuery = graphql`
query($id: ID!) {
WPGraphQL {
pageBy(id: $id) {
featuredImage {
sourceUrl
imageFile {
childImageSharp {
fixed {
...GatsbyImageSharpFixed
}
}
}
}
}
}
}
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment