Building multilingual websites with Gatsby and Drupal

Recently our team at Desarol migrated a large Drupal 7 website for a multinational hotel chain to a decoupled Drupal 9 back-end with a Gatsby front-end. First-class support for localization into Spanish was a key requirement to support the client’s many guests visiting South American locations.

Unfortunately, during the discovery phase we found that the default gatsby-source-drupal source plugin only downloaded content written in English (or whatever language was selected as Drupal’s default language). There was no clear path to simultaneously source content written in Spanish, so we submitted a pull request to Gatsby to allow this functionality.

Thanks to a review and merge from Gatsby’s core team, a fully translatable Gatsby site with Drupal 8 or 9 is now as easy as enabling one core Drupal module (JSON:API) and installing and configuring the source plugin on the Gatsby side.

In this session I will go over:

* Pulling language specific content from Drupal into GraphQL
* Generating language specific pages
* Letting the user choose a language with React
* Optimizing translations for search engines
* Future improvements that can be made with localization in the gatsby-source-drupal source plugin