How to Use the Gatsby-image Component with Drupal and GraphQL

By
How to use the gatsby-image component with Drupal and GraphQL
Effortlessly display Drupal images in Gatsby projects with a clever technique using custom GraphQL schema and gatsby-image.

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!

Team member Jesus Manuel Olivas

About the author

Jesus Manuel Olivas, Co-founder and CEO
Building solutions with GraphQL, Cloud Native, Automation, CMS integrations, NoCode/LowCode, and Edge Computing. With +10 years of experience contributing to Drupal to expand its capabilities and make them accessible to all users.

Share with others

Content Editor Experience Drupal Decoupled

The Modern Content Editor's Experience in Decoupled Drupal

By Flavio Juárez, August 1, 2025

The belief that decoupled Drupal creates poor editorial experiences is outdated. Thanks to visual editing improvements and real-time preview capabilities, today’s content teams can work faster and more independently than ever.

Maintaining Drupal's Power Features in a Decoupled World: Forms, Workflows, and More

Maintaining Drupal's Power Features in a Decoupled World: Forms, Workflows, and More

By Flavio Juárez, July 28, 2025

Are you thinking about going decoupled with Drupal but hesitant because you think doing so means losing Drupal's powerful features like webforms, moderation, and access control? Don’t be. Modern decoupled Drupal lets you keep everything that makes Drupal great, just with more flexibility.

Take your project to the next level!

Let us bring innovation and success to your project with the latest technologies.