WordPress sin cabeza y GraphQL: ventajas y cómo implementarlos

Headless WordPress y GraphQL son dos tecnologías que han ganado atención significativa en los últimos años por sus beneficios en el desarrollo web y la gestión de contenido.

En este artículo, vamos a explorar el concepto de headless WordPress y profundizar en GraphQL, destacando sus ventajas y desventajas. También discutiremos cómo implementar GraphQL en un entorno de WordPress sin cabezal usando el popular plugin WPGraphQL.

Esta información te ayudará a determinar si GraphQL es la elección adecuada para tu implementación de WordPress sin cabezal. Vamos a sumergirnos en el tema.

¿Qué es headless WordPress?

Headless WordPress se refiere al uso de WordPress con una arquitectura headless en lugar de una arquitectura monolítica. WordPress y otros sistemas de gestión de contenido (CMS) tradicionalmente combinan el backend y el frontend en un único software para gestionar el contenido del sitio. El backend combina las bases de datos y el/los servidor(es) que hacen funcionar el sitio, y el frontend es la parte de la página web con la que los usuarios interactúan al visitarla.

La arquitectura headless cambia este modelo al desvincular el backend del frontend. El CMS actúa como backend, conectándose a una plataforma diferente para mostrar interfaces y contenido amigables al usuario en el frontend. Algunas de las tecnologías de frontend más populares que los desarrolladores usan para implementaciones headless incluyen React, Angular, Next, Vue, Faust y Gatsby.

Bajo este modelo, WordPress se convierte en un centro de contenido, exportando datos al frontend exponiendo una interfaz de programación de aplicaciones (API) que cualquier tecnología de frontend puede utilizar.

Headless WordPress es una oferta relativamente nueva. Sin embargo, ya está atrayendo atención por su potencial para ofrecer flexibilidad a los desarrolladores en sus elecciones de frontend y la escalabilidad de gestionar múltiples canales desde el mismo backend.

¿Qué es GraphQL?

GraphQL es un lenguaje de consulta de código abierto creado por Meta en 2012. Se utiliza principalmente para crear APIs versátiles y eficientes, emergiendo como una alternativa a la arquitectura REST para APIs.

Aunque tanto REST como GraphQL hacen solicitudes HTTP a través de URLs y reciben un archivo JSON como respuesta, tienen diferentes enfoques para proporcionar la información a los usuarios. Mientras que REST especifica los recursos disponibles en la API mediante esas URLs, GraphQL estructura los datos en esquemas.

Los esquemas definen objetos, los campos en esos objetos y los tipos de datos que esos campos pueden contener usando el Lenguaje de Definición de Esquemas de GraphQL (SDL). Aquí hay un ejemplo de un esquema de GraphQL que define libros y autores:

type Book {
id: ID
title: String
authors: []
}

type Author {
id: ID
name: String
books: [Book]

Si queremos obtener información sobre un libro específico, creamos una consulta. Aquí es donde brilla una de las principales ventajas de GraphQL: los clientes pueden enviar consultas a un servidor especificando los datos exactos que necesitan, y el servidor responderá con un objeto JSON que coincide con la estructura de la consulta. Aquí tenés un ejemplo de una consulta de GraphQL donde pedimos solo el ID de un libro.

type Query {
book(id:ID!): Book
}

Usando REST, tendríamos que solicitar toda la información en la URL del recurso y luego filtrar la respuesta JSON por el/los campo(s) que necesitamos. El modelo de GraphQL previene la sobrecarga de solicitudes (recibir más información de la que necesitás) al darte solo lo que pedís y ahorra en el uso de ancho de banda, CPU y memoria para transferencias de datos y clasificación. Esto resulta en un rendimiento generalmente mejor que el de las APIs REST.

Ventajas de GraphQL

Sin sobrecarga ni escasez de solicitudes

Con REST, el servidor determina la estructura de las respuestas, y cada endpoint devuelve su contenido completo. Dependiendo de la solicitud, el contenido del endpoint puede proporcionar más (sobrecarga) o menos (escasez) datos de los que el cliente necesita.

En cambio, los usuarios de GraphQL solicitan precisamente la información que necesitan, evitando gastar recursos innecesarios en obtener más datos de los necesarios o en solicitar datos adicionales con múltiples llamadas. En este sentido, GraphQL es más eficiente.

Las APIs de GraphQL tienen un solo endpoint

Las APIs REST contienen múltiples endpoints, cada uno para un recurso específico o una colección de recursos. En contraste, las APIs de GraphQL tienen un único endpoint que acepta todas las consultas y mutaciones (modificaciones de datos en el servidor). Tener un solo endpoint simplifica el desarrollo y el mantenimiento.

Obtención de datos de múltiples recursos al mismo tiempo

Las APIs de GraphQL permiten a los clientes obtener datos de múltiples recursos en una única solicitud, haciendo innecesario realizar varios viajes de ida y vuelta al servidor. Esto ahorra el uso adicional de CPU, memoria y ancho de banda.

Flexibilidad para modificar el esquema de GraphQL a lo largo del tiempo

Como los clientes pueden elegir qué campos obtener datos, los desarrolladores pueden cambiar la estructura del endpoint sin afectar las consultas existentes o tener que lanzar una nueva versión de la API.

Moldeado de datos del lado del cliente

Los desarrolladores pueden fácilmente transformar o manipular los datos recibidos del servidor GraphQL en su lado (lado del cliente) seleccionando campos específicos, cambiando la estructura o combinando datos para adaptar la respuesta a los requisitos exactos de la aplicación del cliente.

Tipos fuertes

GraphQL emplea un sistema de esquemas fuertemente tipado que define la estructura de los datos y las operaciones disponibles que podés realizar sobre ellos. Esto permite la validación y documentación automática, lo que facilita a los desarrolladores comprender e interactuar con la API.

Desventajas de GraphQL

GraphQL tiene una curva de aprendizaje más pronunciada

Muchos desarrolladores están familiarizados con las APIs REST y han trabajado con ellas durante años, pero GraphQL es una tecnología relativamente nueva. Los desarrolladores que comienzan a usar GraphQL necesitarán aprender un nuevo lenguaje de consulta para usarlo de manera efectiva.

Soporte de herramientas

GraphQL requiere un soporte de herramientas más pesado en el lado del cliente y del servidor que las APIs REST, que los clientes pueden consumir con herramientas simples como cURL o un navegador web. Dependiendo de las necesidades del proyecto, los recursos necesarios para usar GraphQL pueden no valer la pena, especialmente para APIs CRUD simples.

El almacenamiento en caché es más difícil

Las APIs REST utilizan HTTP GET por defecto para obtener recursos. GET tiene un comportamiento de almacenamiento en caché bien definido que los navegadores web, CDNs, proxies y servidores web pueden usar. GraphQL, en cambio, utiliza HTTP POST por defecto, complicando el proceso de almacenamiento en caché. Los desarrolladores aún pueden desarrollar soluciones de almacenamiento en caché para GraphQL, pero es más complicado y consume más tiempo.

El problema N+1

Permitir que los clientes soliciten solo los datos que necesitan podría causar problemas. Como los clientes determinan la complejidad de la consulta, nada les impide ejecutar todas las consultas de una sola solicitud. Esto podría colapsar servidores y aplicaciones. Lo mismo podría suceder si una función causa exploraciones inesperadas de tablas para múltiples usuarios simultáneamente.

Mitigar estos riesgos es completamente posible, y los desarrolladores han creado técnicas para hacerlo, pero el proceso añade complejidad a una implementación de GraphQL.

¿Cómo implementar GraphQL para WordPress sin cabezal?

Por defecto, WordPress ofrece una API REST que alimenta el Editor de Bloques y puede interactuar con temas, plugins o aplicaciones personalizadas. Para aprovechar las ventajas de GraphQL para tu backend de WordPress sin cabezal, tenés que instalar y activar el plugin WPGraphQL.

WPGraphQL extiende la funcionalidad de WordPress exponiendo sus datos y características a través de un endpoint de GraphQL. Una vez activo, verás un botón de GraphQL en la barra lateral del panel de administración. Pasá el cursor sobre él y hacé clic en GraphiQL IDE. Esto te llevará al área de pruebas de GraphQL, donde podés escribir consultas para tu base de datos.

Una vez en el área de pruebas, podés experimentar con consultas escribiéndolas en el panel del lado izquierdo. Por ejemplo, el siguiente esquema consulta todos los títulos de cada publicación en tu sitio:

query postsQuery{
  posts{
    edges{
      node{
        title
        }
      }
  }
}

Ejecutá la consulta haciendo clic en el botón “Play” en la parte superior y obtendrás una respuesta como la siguiente en el panel derecho:

{
  "data": {
    "posts": {
      "edges": [
      {
        "node": {
          "title": "Título del Post 1"
        }
      },
      {
        "node": {
          "title": "Título del Post 2"
        }
      },
      {
        "node": {
          "title": "Título del Post 3"
        }
      }
    ]
  }
}

Una vez que WPGraphQL está instalado y activo, podés conectar tu backend de WordPress sin cabezal con cualquier marco de frontend moderno.

¿Deberías usar GraphQL para implementaciones de WordPress sin cabezal?

Para nuestros desarrolladores en White Canvas, GraphQL ofrece muchos beneficios y pocos inconvenientes, lo que lo convierte en nuestra solución preferida para implementaciones de WordPress sin cabezal. Para tus propias implementaciones, considerá los siguientes factores al decidir si usar GraphQL:

• ¿Necesitás consultas detalladas y flexibles?
• ¿Querés evitar la sobrecarga y sub-carga de solicitudes tanto como sea posible?
• ¿Tu sitio de WordPress tiene tipos de publicaciones personalizadas?
• ¿Querés reducir el uso de la red y optimizar el rendimiento minimizando la cantidad de solicitudes API?

GraphQL puede ayudarte a alcanzar todos estos objetivos como una herramienta poderosa al implementar WordPress como un CMS sin cabeza. Sus características proporcionan una experiencia mejorada de desarrollo mientras resuelven muchos problemas asociados con la gestión de APIs REST.

A pesar de ser un desarrollo relativamente nuevo, headless WordPress ofrece una excelente oportunidad en términos de flexibilidad de desarrollo frontend, escalabilidad y entrega de contenido multicanal. La mayoría de los desarrolladores y agencias serían sabias al considerar implementarlo cuando el proyecto se beneficia de ello.

Si encontraste útil esta información, visitá nuestro blog para más ideas, guías y consejos sobre WordPress.