GatsbyJS con Drupal desacoplado

Entre todas las herramientas, frameworks, plugins, etc. que existen en el ámbito de JavaScript, GatsbyJS destaca por lo fácil que es desarrollar sitios web desacoplados (apartir de una API) muy rápidamente y, además, por lo bien que optimiza el rendimiento de estos. La ventaja que nos proporciona GatsbyJS frente a otros fameworks es que el rendimiento y la velocidad de procesado es muy alta.

¿Cómo funciona GatsbyJS?

Imaginemos que tenemos una API JSON en un Drupal o Wordpress, y queremos crear un frontal en el que la velocidad y el rendimiento sea lo más óptimo. Con GatsbyJS solo tendríamos que vincular la base de datos ese Drupal o Worpress con Gatsby, compilar la app, y ya tendríamos todos los datos para acceder libremente. Las consultas de Gatsby se hacen en GraphQL (lo que aumenta significativamente el rendimiento), además que trabaja con datos e imágenes cacheados.

Implementación

Para hacer este ejemplo de implementación de GatsbyJS, usaremos un Drupal con el módulo APIJSON con algunos datos generados por Devel. Para generar una API con drupal podemos seguir la siguiente guía de como crear una api con Drupal, aunque en la guía se usa el módulo RESTful Web Services (para usar el módulo JSON:API es tan fácil como ir a módulos y habilitarlo.

Instalado GatsbyJS y creando el proyecto

npm install -g gatsby-cli

Si queremos comprobar que se ha instalado podemos lanzar el comando gatsby --version

Para crear un nuevo proyecto GatsbyJS, podemos lanzar el siguiente comando: gatsby new Ahora se nos presentarán una serie de preguntas que iremos respondiendo como prefiramos, nosotros seguiremos la guía de GatsbyJS:

What would you like to call your site?

✔ · My Drupal Gatsby App

What would you like to name the folder where your site will be created?

✔ Desktop/ my-first-gatsby-site

Will you be using JavaScript or TypeScript?

❯ JavaScript

TypeScript

Cuando el prompt pregunte “Will you be using a CMS?” (¿Usarás un CMS?) seleccionamos “No (or I’ll add it later)”.

Cuando el prompt pregunte “Would you like to install a styling system?” (¿Instlarás un sistema de estilos?) seleccionamos “No (or I’ll add it later)”.

Y para terminar seleccionamos "Done" y cuando pregunte "Shall we do this? (Y/n)" escribimos "Yes". Ahora saldrá el mensaje "Shall we do this? (Y/n)" y seleccionamos "Y".

Para correr el proyecto iremos a la carpeta del proyecto y correremos el comando gatsby develop

Si queda alguna duda, siempre podemos revisar la documentación

Vinculando Gatsby con Drupal

Para instalar el módulo de Drupal lanzamos el siguiente comando:

npm install gatsby-source-drupal.

En el archivo gatsby-config.js añadimos el módulo en la sección de plugins, especificando la baseUrl y el apiBase (apiJson por defecto). En el siguiente podemos consultar todas las opciones que podemos aplicarle al módulo.

Lanzaremos el comando gatsby develop

Creando nuestra primera página

Ahora se nos mostrarán dos urls: http://localhost:8000/ y http://localhost:8000/___graphql. La primera URL nos muestrea el contenido de nuestra página, mientras la segunda nos dará acceso a la base de datos de GraphQL, en la cual podremos realizar consultas para poder usar en nuestra aplicación.

Para este ejemplo vamos a desarrollar una página en la que se muestre algunos artículos, y que al clicar en el enlace correspondiente a cada artículo, se abra una página mostrando cada artículo. Lo primero será generar algunos artículos con Devel en drupal. Ten en cuenta que una vez generados, tendremos que volver a lanzar el comando gatsby develop para que queden almacenados esos datos.

Una vez generado los artículos y haber lanzado de nuevo el comando, accederemos a la url del graphql.

Como queremos generar una vista que muestre todos los artículos, vamos a realizar una consulta para que nos los devuelva. Para generar esta consulta nos vamos a ayudar de la columna de la izquierda, en la que vienen representadas todas las entidades que hay en drupal.

La consulta debería quedar tal que así:

Ahora crearemos un componente que muestre cada uno de estos artículos. Para ello, nos iremos a nuestra aplicación de Gatsby y crearemos el archivo src/components/articles.js y su archivo correspondiente de css (src/components/articles.css).

Componente de Gatsby

Los componentes en Gatsby no dejan de ser componentes de React, por lo que tienen la misma estructura. Para realizar la consultas debemos importar la constante grahql y el staticQuery. En este caso usaremos el staticQuery, que nos permite renderizar los datos sin tener que hacer uso de un Layout. Importamos la clase css y el componente Link, que nos servirá para enlazar entre las diferentes páginas de nuestra aplicación.

Declaramos una variable que almacenará nuestro componente, al cual le pasamos la consulta que recogimos del mismo Gatsby y lanzaremos un render que pintará el componente. Podríamos ordenar el código aún más y en vez tener el código ahí mismo podríamos crear un articleComponent al que le pasamos los datos de cada componente. Con el componente Link, le asignamos la url (que aún no existe).

Ahora tenemos que renderizar el componente. En nuestro caso, lo haremos en la página principal (src/pages/index.js). Hemos creado algunos estilos para que quede bien maquetado. Para pintar el componente es tan sencillo como importarlo (import ARticlesComponent from "../components/articles").

Creando las templates para la generación de las páginas

Ahora mismo los links no nos lleva a ningún lado, y eso es por que no hemos creado la correspondiente página para cada artículo. Para ello, vamos a hacer uso del archivo que se encuentra en la raíz gastby-node.js

Este archivo es leído una vez se ha lanzado el proceso de construcción del sitio. En este archivo podemos usar la API para crear páginas dinámicamente, añadir datos en el GraphQL, o lanzar procesos mientras se ejecuta el ciclo de vida de construcción del sitio.

Primero definiremos el export de creación de páginas. Le indicamos cual es la ruta de los artículos y lanzamos la consulta que nos devolverá los datos (solo queremos los necesarios para crear la uri correspondiente a cada artículo). Luego creamos la página con el createPage definido anteriormente. Es muy importante que la url tenga la misma estructura que la url que definimos en el componente de los artículos. Aparte de eso, le tenemos que pasar donde se encuentra la plantilla de la página. También podemos enviar una serie de variables en el contexto, en este caso solo le pasaremos el id del artículo.

Ahora toca crear la plantilla de la página. Iremos a la carpeta de plantillas (src/templates) y crearemos el archivo article.js. En este archivo definiremos la estructura básica de la página.

Este componente no tiene nada de diferente a otros que hayamos visto anteriormente. Se crea un ArticlePage que espera una variable data, con la que podremos trabajar los datos del artículo. La query espera una variable id (la que pasamos en el gatsby-node.js como contexto).

Y ahora sí, ya tenemos nuestra página de artículo generada dinámicamente. No olvidemos que gatsby funciona en tiempo de compilación, por lo que deberíamos lanzar de nuevo la aplicación y ya lo tendríamos.

Como podemos ver, programar páginas estáticas dinámicamente con un rendimiento increíble es muy sencillo y rápido.