Seguimos nuestra serie sobre “¿Cómo maquetar en Gatsby?” desde un punto de vista más técnico y arquitectónico que visual. Estamos incidiendo en las características principales que hacen de este Framework de React, un framework realmente interesante para tu caja de herramientas, si lo que estás buscando es simplicidad, robustez y versatilidad.
Otra de estas características de Gatsby es la posibilidad de utilizarse GraphQL para hacer cosas tan interesantes como conectar con Drupal y sacar partido del enfoque “Decoupled Drupal”. Este enfoque te permite utilizar tus tecnologías de frontend preferidas, con los servicios y APIs de Drupal en el backend.
Artículos recomendados antes de seguir la lectura:
¿Qué es GraphQL?
Si bien recuerdas, GraphQL especifica un método para consultar datos de un servidor. Este estándar de código abierto creado por Facebook permite tener como fuente de datos una base de datos SQL, o una API remota. Es aquí donde entra Drupal 8.
Muchas veces, desarrollar aplicaciones con React puede ser complejo, sobretodo por una de las características que hacen de React una herramienta adoptada por muchos desarrolladores: su cantidad de bibliotecas, y la dependencia de las mismas para implementar una simple funcionalidad.
Gatsby pretende eliminar estos cuellos de botella y en nuestro caso, hace que sea más fácil consumir datos de una API utilizando GraphQL. Por otro lado, permite que en el backend utilices el modelo de datos, las herramientas de creación y edición de contenidos de Drupal, además de su módulo JSON:API para servir contenido a nuestra instalación de Gatsby.
Al final de este artículo deberás saber cómo extraer contenido de un JSON en tu sitio web Gatsby y mostrarlo en una sección de nuestra página inicial.
¿Cómo obtener los datos de Drupal en Gatsby?
Para aprovechar la estructura que ya tenemos de la sesiones anteriores, lo que que haremos ahora será crear un servidor de Drupal y posteriormente obtendremos el contenido de este servidor.
Crear un servidor Drupal
Supongamos que ya tienes instalado un sitio web en Drupal 8. Necesitas crear un tipo de contenido con el nombre Article y con algunos campos iniciales. Crearemos Title, Body y Image.
Luego debes transformar tu Drupal en un servidor API. Para hacerlo puedes instalar el módulo JSON:API, como hemos referido anteriormente, y el módulo JSON:API Extras. Jsonapi te proporcionará un endpoint por defecto “/jsonapi”, mientras que jsonapi_extras te ayudará a controlar mejor la API para que puedas por ejemplo deshabilitar recursos, o campos que no quieres que estén disponibles por API.
Para verificar si todo funciona correctamente, puedes acceder a https:/[tusitiowebdrupal]/jsonapi y obtener un resultado parecido al siguiente:
Uso la extensión Chrome JSON Viewer para ver datos de JSON en un formato más amigable. ;)
A partir de este momento nuestro Gatsby está preparado para consultar nuestros artículos de Drupal y listarlos en una página.
Obtener el contenido de Drupal
En tu carpeta src/page de Gatsby crea un nuevo fichero de JavaScript, en este caso, articles.js con el siguiente código inicial:
Guarda el archivo. Si accedes a /articles verás el resultado:
¿Cómo obtener los datos de Drupal?
Entre muchos otros plugins, Gatsby te proporciona un plugin que te ayuda a obtener los datos de Drupal 8. Puedes instalar el plugin mediante línea de comandos:
$> yarn add gatsby-source-drupal
y habilitarlo en el fichero de configuraciones de Gatsby gatbsy-config.js
El valor de apiBase es nuestro endpoint jsonapi, pero podría ser otro. Eso sí, debes definirlo en los ajustes del módulo de Drupal JSON:API.
Utilizar GraphQL para consultar todos los artículos de Drupal
Otra de las características de GraphQL y su ‘alianza’ con Gatsby es que puedes utilizar una herramienta en el navegador para escribir, validar y testear consultas de GraphQL. La herramienta se llama GraphiQL y la puedes encontrar, por ejemplo en localhost:8000/___graphql. Podremos hablar sobre GraphiQL en futuras sesiones, pero gracias a esta herramienta hemos podido construir la siguiente query:
Y la integraremos en nuestra página (component) de la siguiente forma:
A partir de este momento, podemos actualizar nuestra página (component page) para que por muestre el contenido del title y el del body de artículo, con nuestra plantilla PIPER.
Y obtenemos el resultado final:
Conclusión
Naturalmente, podríamos haber configurado más elementos de HTML que están dentro de
y convertirlos en componentes de Gatsby para reutilizarlos posteriormente. También podríamos ajustar los estilos (CSS) para que se viese mejor el título que hay sobre las imágenes. Pero sale del scope de este artículo.
De la misma forma, es posible que te haya llamado la atención dangerouslySetInnerHTML y su forma de “printar” el body del contenido. dangerouslySetInnerHTML es el sustituto de React para utilizar innerHTML en el DOM del navegador. Para evitar algún ataque Cross-site scripting (XSS) debes declarar dangerouslySetInnerHTML y pasarle un objeto con una clave __html.
Y eso es todo por hoy. Si tienes alguna pregunta, ¡no dudes en comentar!
¿Cómo has visto la integración de Drupal con Gatsby y GraphQL? ¿Utilizarías Drupal, GraphQL y Gatsby para tu próximo proyecto?
Fuente:
Fotografía: Gerd Altmann en Pixabay
