GraphQL in Twig!

In 2019 I presented "a beginner’s guide on how to use GraphQL in Twig" - to progressively decouple Drupal's Front end at Decoupled Days in New York.

Decoupled Drupal is part of the future, but learning an entirely new stack can be daunting (like React, Vue or Angular, if you haven't used those before).

Writing GraphQL inside Twig templates gives developers a path to an accessible soft-decoupled approach.

This session will introduce GraphQL queries and demonstrate the advantages of changing the Drupal push model to a pull model by letting the template define its data requirements.

Quick Benefits

• Performance
  -- Everything done in the same GraphQL “request”, no HTTP request is made.
  -- Queries are cached
  -- Queries are grouped within multiple templates
  -- Under the hood, it's like an additional hook

• Advantages
  -- We still get Drupal forms
  -- We still get translations out of the box
  -- We still get all the nice features as it ...
  -- Works alongside with standard Drupal
  -- We have a common language between Backend and Frontend!
  -- Reduced risk / cost

In the future: it is easier to partly decouple (ie: some React driven components), and it lays a foundation path to fully decouple. “Future proof”.

See the Presentation here.

https://www.youtube.com/watch?v=lknMgevZqu0

Links:

• Soft decoupling with GraphQL + Twig: https://www.youtube.com/watch?v=QsmeXMZ0foM
• Atomic design with GraphQL + Twig: https://www.youtube.com/watch?v=9AJNp72-3D8
• Drupal Europe presentation: https://www.youtube.com/watch?v=BFf3stFHmk4

Resources

• https://www.drupal.org/project/graphql
• https://www.amazeelabs.com/en/blog/using-twig-storybook-and-drupal
• https://www.amazeelabs.com/en/blog/dont-push-it-using-graphql-twig
• https://drupal.slack.com/ #graphql