GraphQL y Twig para un Drupal "soft-decoupled"

graphql.png
Solucionex
10
Sep 20

El futuro de Drupal es, muy probablemente, una solución desacoplada, utilizando Drupal como backend y gestor de base de datos, y algún otro framework para el frontend (React, Vue...).

Esta solución, aunque muy potente y moderna, trae consigo una serie de problemas que se deberán asumir:

  • Necesitar conocimientos avanzados de la tecnología que utilizemos como frontend, y de Drupal.
  • Duplicar la cantidad de posibles errores y dónde localizarlos.
  • No poder utilizar la traducción de Drupal de forma directa.
  • No poder utilizar los formularios de Drupal, lo que implica generar las validaciones a mano, entre otras cosas.
  • Y muchas otras pequeñas ventajas que ofrece Drupal como solución completa que debemos re-implementar en el frontend.

Vista la problemática que supone utilizar un Drupal completamente desacoplado... por qué no empezamos poco a poco?

 

GraphQL y Twig

El módulo GraphQL Twig nos proporciona una posible implementación de esta solución intermedia, una forma de utilizar GraphQL desde nuestras plantillas Twig, sin necesidad de configuraciones Drupal o preprocesados. Este módulo sólo requiere instalar el modulo GraphQL para Drupal.

Veamos un ejemplo sencillo de qué nos permite hacer este módulo:

{#graphql
query {
  users:userQuery {
    count
  }
}
#}
<p>Esta página contiene {{ graphql.data.users.count }} usuarios registrados!</p>

En el fragmento de código Twig anterior, incluímos al principio del todo las consultas GraphQL que queramos utilizar: en este caso utilizamos userQuery, proporcionado por el módulo GraphQL, para obtener la cantidad total de usuarios del portal, count.

Los argumentos de la consulta serán accesibles a través de las variables del tema en Twig; en el ejemplo, podemos acceder a count desde graphql.data.users.count.

Aún siendo un caso de uso muy simple, utilizando esta consulta GraphQL en nuestra plantilla Twig, nos estamos ahorrando la necesidad de preprocesar esa información y adjuntarla a la plantilla para poder usarla; es bastante más rápido y sencillo.

 

GraphQL Views

Por defecto, podemos utilizar las queries que nos proporciona el módulo core de GraphQL, pero en muchos casos esto se nos va a quedar un poco corto (o incómodo).

El módulo GraphQL Views nos permite la creación de displays GraphQL en nuestras views. Este display expondrá los datos GraphQL según los obtenga la view, lo que incluye el uso de filtros contextuales, relaciones, filtrado y ordenación, campos específicos...

Supongamos que creamos un display GraphQL para obtener los nodos relacionados (que tengan tags en común) con el nodo actual. En la view, añadimos el nodo actual como filtro contextual, filtramos los tags con una relación, y le damos un nombre a la query ('Query name'). Una vez tengamos este display, podemos obtener los datos que expone de la siguiente forma:

{#graphql
query ($node: String!) {
  node:nodeById(id: $node) {
    title:entityLabel
    related:relatedNodes {
      results {
        title:entityLabel
        url:entityUrl {
          path
        }
        author:uid {
          entity {
            url:entityUrl {
              path
            }
            name
          }
        }
      }
    }
  }
}
#}

Con este código en nuestro Twig, accedemos a los datos expuestos por la view que creamos anteriormente, cuyo Query name es relatedNodes. Para sacar estos nodos relacionados por pantalla, podemos simplemente recorrer los resultados desde Twig:

{% for node in related.results %}
 Hacemos lo que queramos con node (tenemos title, url, author...)
{% endfor %}

Como extra, podemos utilizar los fragmentos de GraphQL con nuestro Twig (mediante includes), en vez de ponerlo todo junto, dejando nuestro código mucho más ordenado y reutilizable. 

 

Ventajas:

  • Obtenemos un workflow semi-desacoplado.
  • Mantenemos todas las ventajas que nos ofrece Drupal como solución completa (traducciones, forms, etc.)
  • Evitamos mucha configuración, site-building, preprocesados...
  • No tiene ningún impacto en el rendimiento.
  • Muy ampliable y reutilizable.

Desventajas:

  • Requiere conocimientos de GraphQL.
  • Mezcla responsabilidades entre el frontend y backend.
  • Creamos consultas desde templates (aunque, al menos, no están fijadas a una implementación en concreto)
  • Las consultas requieren conocimiento extenso de Drupal, y no serán reutilizables fuera de este entorno

 

Como conclusión: GraphQL Twig nos ofrece una solución intermedia entre el Drupal clásico y el Drupal desacoplado, con la que podemos ir dando unos primeros pasos hacia este futuro que, seguramente, no tarde mucho en convertirse en la norma.