Decoupled Drupal is getting a lot of attention lately, and with good reason! Apart from the technological benefits of a Javascript based frontend like loading times and responsiveness, it moves the responsibility of how data is displayed to the frontend unit, which matches project workflows a lot better. But sometimes it’s not worth the cost and the project simply does not justify the full Drupal + React technology stack.



Key point

From a frontend developer’s point of view, the current theme system is complex and very hard to use. Traditionally, Drupal defines data structures that provide a “standard” rendered output as variables in the Twig templates. However, they are populated during processing or preprocessing and altered in modules or themes, which makes it very hard to reason with the data flow.

There are ideas to improve the theme system, but regarding the success of decoupling, perhaps it’s time to approach the problem from a different angle. Instead of PUSHing the data from Drupal itself, we can turn this around and simply PULL the required data from within Twig templates using GraphQL queries.

Using this hybrid decoupled approach, we can achieve a much cleaner data flow and significantly increase the readability and maintainability of the project and code. Frontenders know exactly how to handle data on their side and backenders have less code to write.



Topics covered:

Introduction to decoupled Drupal & the current theming system limitations

GraphQL Twig module as a hybrid solution

The “Pull approach”

Examples

Pros and cons

Future improvements

Using GraphQL Twig for Drupal instead of going fully decoupled with React, Vue or the next month's JavaScript framework might sound like a crazy idea, but I assure you it’s worth giving it a try.