GraphQL Twig

The GraphQL Twig module allows you to inject data into Twig templates by simply adding a GraphQL query. No site building or pre-processing necessary.

Simple example

The "Powered by Drupal" block only gives credit to Drupal, but what's a website without administrators and users? Right. Lets fix that.

Place the following template override for the "Powered by Drupal" block in your theme:

{#graphql
query {
  admin:userById(id: "1") {
    uid
    name
  }
  user:currentUserContext {
    uid
  }
}
#}

{% extends '@bartik/block.html.twig' %}
{% block content %}
  {% set admin = graphql.admin %}
  {% set user = graphql.user %}
  <div{{ content_attributes.addClass('content') }}>
    {{ content }} and
      {% if user.uid == admin.uid %}
        you, {{ admin.name }}.
      {% else %}
        you, appreciated anonymous visitor.
      {% endif %}
  </div>
{% endblock %}

For the sake of an example, we assumed that you based your theme on Bartik (which you probably didn't), but what else happens here? In the {#graphql ... #} comment block we annotated a simple GraphQL query, that will be executed in an additional preprocessing step, to populate your template with an additional variable called graphql that will contain the result. We injected additional information into our template. without the need to fall back to site building or manual preprocessing.

This is the basic concept of GraphQL in Twig. Additionally it will collect query fragments from included templates, automatically try to match template variables to query arguments and enable you to tap into all features of the Drupal GraphQL module.

More documentation coming soon!

Compatibly

As the GraphQL project created version 3.x & 4.x which differ greatly this project has been split into two versions:

GraphQL Twig 3.x

This version is Drupal 9/10 Ready & compatible with GraphQL 3.x

GraphQL Twig 4.x

This version is Drupal 9/10 Ready & compatible with GraphQL 4.x