JSON:API es uno de los módulos más utilizados de Drupal actualmente, sobretodo para servir a aplicaciones web que quieren cumplir con la arquitectura JAMstack. JSON:API además de ser un buen aliado para tu cambio al enfoque decoupled y para que aproveches de forma óptima las posibilidades y arquitectura de Drupal, te permite utilizar el CMS como servidor API, como ya hemos comentado varias veces aquí. Lo positivo de todo ello es que puedes generar tu servidor API y configurar tu API sin gran esfuerzo, además de beneficiar no solamente, por ejemplo, del sistema de edición de nodos o permisos de Drupal, pero también podrás beneficiarte de las especificaciones de JSON:API.
Imágenes y Ficheros
Otra de las características interesantes de JSON:API es que te permite servir los nodos de Drupal con sus imágenes para que puedas mostrarlas en tu frontend. Lo que pasa muchas veces es que el proceso de recuperar las imágenes no es muy simple y esto te puede hacer perder algún tiempo de desarrollo si quieres realmente implementarlo.
Hoy quiero compartir contigo una de las formas que podrías utilizar para mostrar las imágenes de tus artículos si quieres utilizar Drupal con JSON:API y React, sin que tengas que realizar múltiples peticiones a tu servidor.
Doy por supuesto que ya tienes instalado el módulo y sus submódulos en Drupal, además de los módulos de seguridad. También puedes leer aquí sobre cómo hacer la integración. Además, doy por hecho que tu React ya está funcionando con sus respectivos Componentes.
¿Cómo recuperar las imágenes con React?
Si accedes directamente a /jsonapi de tu instalación de Drupal verás que el recurso responsable por mostrarte todos los nodos, te muestra en “relationships” la información y metatags sobre las imágenes, o imagen de tu campo field_image, pero la url de la imagen, por ejemplo, ¡no existe! Si no ves el campo en relationships, es muy probable que no hayas habilitado el recurso de ficheros en los ajustes del JSON:API.
Parámetro Include
Lo primero que tienes que hacer es cambiar cómo llamas al endpoint. Si accedes al endpoint mediante /jsonapi/node/article, debes añadir el parámetro include con el valor field_image a los parámetros existes. Por ejemplo: jsonapi/node/article?include=field_image. De esta forma JSON:API añade un nuevo objeto included con todas las imágenes de los nodos representados. Creo que ya entiendes la razón de este artículo, ¿correcto?. Querías que cada nodo tuviera sus imágenes en su objeto de JSON, pero no es el caso. Además solamente quieres la primera imagen del articulo. ¿Qué hacer?
Si tienes un componente ArticleListPage que ya lista los nodes en React, puedes añadir lo siguiente antes de tu método render().
Utilizamos el método filter() de JavaScript para retornar solamente las imágenes que queremos. El método getIncludedImage debería retornar la primera imagen de un campo included.
Lo siguiente que debes hacer es crear un método que permita adjuntar las URLs de included en tus datos de artículos. La siguiente podría ser una forma de hacerlo:
Por el scope de ester artículo me dejado algunos detalles. Por ejemplo, recorda de controlar si tu campo field_image es de imágenes múltiples o no. También debes tener en cuenta que debes iniciar una nueva variable articlesAndIncluded en this.state, además de la variable articles y después adjuntar las URLs de include en los datos de los artículos.
El siguiente paso es, en tu método responsable por recuperar los artículos, añadir en el método this.setState({)) un segundo parámetro como retrollamada, tu nuevo método setArticlesAndIncludedUrl.
A partir de este momento, tu variable articlesAndIncluded es un vector con artículos y imágenes que puedes iterar y retornarlos en el mismo componente o pasarlo como props a un componente hijo.
Por ejemplo
o
Conclusión
¡Y eso es todo! Como has podido ver, hemos podido utilizar algunos métodos de iteración de JavaScript que mencionamos en artículos anteriores, pero en este caso para un caso real. ¡Espero que te sirva para tus siguientes proyectos!
Recuperando las imágenes de esta forma nos hemos ahorrado tener que hacer una nueva petición al servidor para en endpoint de JSON:API de Drupal “/jsonapi/file/file” para recuperar las imágenes de nuestro(s) artículo(s), por cada artículo o imagen. Con esto ganamos no solamente en simplicidad de código, pero también en rendimiento de nuestra aplicación en el frontend, pero sobretodo en el backend.
¿Y tú, cómo incluyes normalmente tus imágenes desde tu API en tu aplicación web?
Fotografía: cocoparisienne en Pixabay
