How to Retrieve Drupal Nodes in Draft State in Gatsby Development Mode

By
How to retrieve Drupal nodes in draft state in Gatsby development mode
Discover a powerful technique to include draft nodes in Gatsby projects when integrating with Drupal, ensuring an accurate preview of unpublished content.

When working with Gatsby and Drupal, it's essential to ensure that your website's content appears exactly as intended, even when dealing with unpublished draft content. But how can you achieve this without compromising your development process? 
In this blog post, we'll unveil a simple yet powerful technique to fetch and display draft nodes using Gatsby seamlessly. 

Using NODE_ENV to Filter Nodes

Using this simple code example, you can include nodes on Draft state only in development "gatsby develop". 

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 exports.createPages = ({ graphql, actions }) => { const { createPage } = actions const status = process.env.NODE_ENV === 'production' ? '["1"]' : '["0", "1"]' return graphql(` { drupal { articles: nodeQuery( filter: { conditions: [ { operator: IN, field: "status", value: ${status} } { operator: EQUAL, field: "type", value: ["article"] } ] } sort: [{ field: "created", direction: DESC }] ) { entities { entityId entityLabel ... on Drupal_Node { status path { alias } } } } } } `).then((result) => { if (result.errors) { throw result.errors } const { articles } = result.data.drupal articles.entities.forEach((article) => { createPage({ path: article.path.alias, component: path.resolve(`./src/templates/article.js`), context: { slug: article.path.alias, id: article.entityId, }, }) }) }) }

This code sets a value to the status constant based on the process.env.NODE_ENV value and then uses that value to fetch Published nodes on production and Draft + Published nodes while running in development mode.

Wrapping Up

The objective of fetching only published content on production is to hide those nodes while executing the build process and avoid deploying unpublished content.

Efficiently managing content visibility during the development process is crucial for any Gatsby and Drupal project. Using our code example, you can effortlessly include draft nodes only when running in development mode, ensuring a crystal-clear preview of your unpublished content. With this technique, you'll control what is displayed in production while seamlessly testing and refining your website's user experience. Unlock the power of Gatsby and Drupal while keeping unpublished content under wraps, and propel your development workflow to new heights.

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

How to Move from Drupal 7 to Decoupled Preview

How to Move from Drupal 7 to a Decoupled Architecture?

By Jesus Manuel Olivas, May 20, 2025

With Drupal 7 now at End-Of-Life, many organizations planning their D7 exit are rethinking their overall web architecture, given the complexities involved in moving to today’s Drupal. This guide explores decoupled architecture as a powerful alternative, breaking down its business value and strategic advantages.

Drupal 7 to Backdrop Preview

Migrating from Drupal 7 to Backdrop CMS: A Strategic Guide

By Jesus Manuel Olivas, May 15, 2025

With Drupal 7 now at end-of-life, many small to mid-sized organizations face tough decisions about migration. This guide explores why Backdrop CMS offers a practical, budget-friendly alternative, especially for teams with deep D7 expertise and limited development resources.

Take your project to the next level!

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