How to Use the Gatsby-image Component with Drupal and GraphQL
When transitioning from gatsby-source-drupal, powered by JSON:API, to gatsby-source-graphql, leveraging the capabilities of the GraphQL module, you may notice the immediate absence of automatic media-image field processing. This missing feature can be quite a setback for seamless image integration.
In this blog post, we'll unveil a clever technique using the createResolvers API that allows you to effortlessly fetch and display images from Drupal in your Gatsby project.
Customizing the GraphQL Schema
To complete this task, you must add the following code to your gatsby-node.js file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const { createRemoteFileNode } = require(`gatsby-source-filesystem`)
exports.createResolvers = ({
actions,
getCache,
createNodeId,
createResolvers,
}) => {
const { createNode } = actions
createResolvers({
Drupal_MediaImage: {
gatsbyImageFile: {
type: `File`,
resolve(source) {
return createRemoteFileNode({
url: source.fieldMediaImage.url,
getCache,
createNode,
createNodeId,
})
},
},
},
})
}
Adding that code creates a new gatsbyImageFile field on the Drupal_MediaImage type, generating File nodes from every value on the source.fieldMediaImage.url field.
Adding a GraphQL Fragment to Query the Image
Since File nodes automatically have childImageSharp convenience fields available, you can then feed the images from Drupal into gatsby-image by simply querying:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export const MediaImage = graphql`
fragment MediaImage on Drupal_MediaImage {
fieldMediaImage {
url
alt
}
gatsbyImageFile {
childImageSharp {
fluid {
originalName
...GatsbyImageSharpFluid
}
}
}
}
Wrapping Up
Efficiently integrating images from Drupal into your Gatsby project should be a breeze without the need for repetitive code snippets. By harnessing the gatsby-source-drupal-graphql plugin, a valuable extension of gatsby-source-graphql, you gain a powerful ally in connecting to Drupal and quickly consuming data. With enhanced developer experience (DX) and seamless decoupled implementation, this plugin streamlines your image-handling process, saving you valuable time and effort. As a result, elevate your Gatsby and Drupal workflow to new heights, ensuring stunning visuals that captivate your audience, and embrace the power of gatsby-source-drupal-graphql!
About the author
The Future of Web Application Development Beyond 2025
By Jorge Valdez, January 7, 2025Web applications have experienced many changes throughout the years, from static websites to AI-driven tools, PWAs, IoT integration, and more. Discover key trends shaping web application development’s future and learn why traditional websites remain relevant in a hybrid digital ecosystem.
Web Applications Types and Examples To Know in 2025
By Jorge Valdez, December 11, 2024In 2025, web apps have various types and examples, but you don’t need to know them all. Our latest article focuses on the most important ones for developers. Learn what really matters in the world of web applications in this article!
Take your project to the next level!
Let us bring innovation and success to your project with the latest technologies.