How to Create Multilingual Pages Using Gatsby, Drupal and GraphQL

Releasing the power of multi-language content in your Drupal-based website can be a game changer in reaching a global audience. But how can you access these language-specific pages with Gatsby and GraphQL? In this blog post, we'll walk you through the steps to seamlessly retrieve multi-language nodes of the type "page" from Drupal. Then, by leveraging the GraphQL module and a few handy code snippets, you'll then be well on your way to delivering a truly multilingual web experience.
To try this code, use the gatsby-source-graphql or the gatsby-source-drupal-graphql plugin.
Adding the GraphQL Query to Fetch Multi-language Nodes
To fetch multi-language nodes of the type "page" from Drupal using Gatsby and the GraphQL module, you need to add to your gatsby-node.js file the following GraphQL query.
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
{
drupal {
pages: nodeQuery(
filter: {
conditions: [
{ operator: EQUAL, field: "status", value: ["1"] }
{ operator: EQUAL, field: "type", value: ["page"] }
]
}
) {
entities {
entityTranslations {
entityId
entityLanguage {
id
}
... on Drupal_Node {
path {
alias
}
}
}
}
}
}
}
As you can see, we are using entityTranslations to extract fields instead of entities directly. This allows us to fetch all translated nodes for that particular node.
Creating the Pages
Once you have the query, you can iterate the result to create your pages by calling a template file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const pages = result.data.drupal.pages.entities
pages.forEach((page) => {
page.entityTranslations.forEach((entity) => {
const pathAlias = entity.path.alias.toLowerCase().replace("/homepage", "/")
createPage({
path: pathAlias,
component: path.resolve(`./src/templates/page.js`),
context: {
id: entity.entityId,
language: calculateLanguage(entity.entityLanguage.id),
},
})
})
})
The calculateLanguage function is a helper used to transform language value as a valid Language type.
Adding the GraphQL Query to Your Template Page
Finally, your page template should have a page query like this.
In this GraphQL query, we pass node id and language to the nodeById query to fetch the node in the language we use as a filter.
1
2
3
4
5
6
7
8
9
export const pageQuery = graphql`
query page($id: String!, $language: Drupal_LanguageId!) {
drupal {
page: nodeById(id: $id, language: $language) {
...NodePage
}
}
}
`
We use the custom GraphQL fragment ...NodePage to define the properties/fields we want to query from the content node.
Wrapping Up
You've just unlocked a new language flexibility for your Drupal website powered by Gatsby. By incorporating the provided GraphQL queries and integrating them into your gatsby-node.js and template files, you can effortlessly fetch multi-language pages from Drupal. Language barriers won't prevent your site from captivating audiences worldwide.
Remember to embrace the power of entityTranslations, create your pages dynamically and use the NodePage fragment to customize the properties you want to query. With these tools, you can take your website to new linguistic horizons. So harness the power of multilingualism and let your website shine in every language imaginable!

About the author

The Modern Content Editor's Experience in Decoupled Drupal
By Flavio Juárez, August 1, 2025The 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
By Flavio Juárez, July 28, 2025Are 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.