Cómo realizar consultas GraphQL sobre WordPress

Aunque el reinado del consumo de datos desde el exterior de las aplicaciones ha sido para API REST durante muchos años, poco a poco GraphQL se está abriendo paso y ganando adeptos.

A diferencia de las REST API, GraphQL permite tener un modelo de consulta en el que el consumo no depende de ciertos endpoint que decide el desarrollador de la misma, sino que integra un sistema de consultas que decide el cliente que consume la información.

Si bien WordPress ofrece la posibilidad de consumir la API que viene integrada por defecto, hoy vamos a ver cómo a través de la instalación del plugin GraphQL, vamos a tener la posibilida de consumir la información contenida dentro de nuestro WordPress, lo cual nos va a dar mucha más libertad a la hora de decidir qué datos traer y de qué forma.

Si no estás familiarizado con el término API REST, te dejo un video aquí que puede ser muy aclaratorio: ¿Qué es una API?

Si estás interesado en saber cómo realizar consultas de los posts de WordPress, es justamente lo que vamos a realizar en este artículo.

La instalación de plugins: GraphQL y WPGraphiQL ¶

Aunque a pripori los nombres de los plugins puedan llevar a confusión, sus funcionalidades son totalmente distintas (aunque están estrechamente ligadas).

El plugin GraphQL capacita a la instalación de WordPress para servir datos al exterior utilizando el lenguaje de consultas GraphQL, sin embargo, GraphiQL es una interfaz (IDE) que te ayuda a diseñar las consultas. Es un constructor de consultas que te va a facilitar saber qué nomeclatura utilizar para llevar a cabo las mismas.

El plugin de GraphQL no está dentro del repositorio oficial, así que nos tendremos que dirigir a la web oficial de WPGraphQL donde encontraremos el repositorio para descargar el plugin directamente.

Una vez descargado, es tan sencillo como copiar el contenido descargado en la carpeta de plugins: /wp-content/plugins.

En un segundo paso tendremos que activar el plugin a través de la consola WP CLi o través de la interfaz gráfica: pulsando ‘Activar’ en la pantalla de plugins.

A partir de aquí ya podremos atacar a la ruta que nos dará acceso a los datos de nuestro sitio WP. La ruta es la de nuestra instalación local, añadiendo /graphqlal final de la misma.

En cuanto a WPGraphiQL, la instalación es idéntica a la del plugin GraphQL. Se basa en la el cliente GraphiQL.

El IDE WPGraphiQL ¶

GraphiQL nos ofrece una interfaz intuitiva que nos permitirá diseñar nuestra consultas en formato GraphQL.

Aquí podemos ver una captura de la interfaz:

En la interfaz podemos ver tres secciones diferenciadas por tres columnas:

• El explorador: que nos permitirá acceder a todos lo elementos a consultar a golpe de click.
• El editor schema: donde podremos diseñar la consulta con el schema propio de GraphQL.
• Los resultados: lugar donde podremos ver el resultado de la consulta.

Consulta de posts en un sitio WordPress ¶

Si te estás preguntando cómo hacer consultas de los posts de tu sitio WordPress con graphQL, tengo que decirte que con el IDE de WPGraphiQL es muy sencillo.

Situémonos en el editor, en la parte central donde podemos escribir. Si pulsamos el botón de Play que nos encontramos justo encima (el botón que ejecuta la query que hayamos escrito en el schema), podemos ver que el panel de resultados, nos muestra un error que nos indica que la consulta debe incluir al menos uno de estos dos parámetros: queryo queryId.

No os preocupéis, esto simplemente nos avisa de uqe no hemos escrito nada en el editor que se pueda interpretar.

Si nos situamos en el editor y pulsamos las teclas [CTRL]y [ESPACIO]el mismo editor nos ayuda a elegir entre cuatro opciones: query, mutation, subscription o fragment. En el caso que nos atañe vamos a elegir query.

Veamos una consulta simple que nos traiga los posts publicados en nuestro sitio WordPress:

query GET_POSTS {
    posts {
        edges {
            node {
                title
                id
                databaseId
            }
        }
    }
}

La nomeclatura es bastante sencilla de seguir:

• En la primera linea nos podemos encontrar las palabras query y GET_POSTS: En este caso query indica que vamos a realizar una consulta a nuestro sitio WP y GET_POSTS es el nombre que nosotros mismo elegimos para esta consulta.
• posts: hace referencia a que vamos a consultar el objeto posts.
• edges y node: describiremos estos dos elementos en profundidad en futuros artículos, por ahora sólo nos basta saber con que es la forma en la que WordPress organiza internamente los elementos dentro del mismo y sus relaciones entre ellos. Con elementos nos referimos a los mismo posts, sus categorías, imágenes, etc.
• title, id y databaseId: estas son las propiedades específicas de cada uno de los posts que queremos obtener. En este caso el título, la ID del posts y la ID del mismo dentro de la base de datos.

Al realizar esta consulta deberíamos obtener un resultado como este:

{
    'data': {
        'posts': { 
            'edges': [{
                'node':{
                    'title': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
                    'id': 'cDggr72SD==',
                    'databaseId': 34
                }
                'node':{
                    'title': 'Aenean rhoncus luctus malesuada. Morbi id scelerisque leo',
                    'id': 'DDEht723D==',
                    'databaseId': 34
                }
            }]
        }
    }
}

Como podemos ver, la información que devuelve GraphQL como resultado puede ser ahora tratada de forma externa y desacoplando de WP la aplicación para la que esté enfocada esta consulta.

Otras propiedades del posts pueden ser obtenidas a través de las consultas GraphQL, podríamos obtener cualquier elemento que tenga relación con los mismos: autor, comentarios, fecha, etc.

En posteriores artículos veremos como poder tratar con la información devuelta de las consultas desde un frontal que no tiene porqué ser el que provee WordPress.

API REST VS GraphQL en WordPress ¶

Llegados a este punto, alguno de vosotros puede que os estéis preguntando cuál es la diferencia real entre el método tradicional de obtención de datos ‘desde fuera’ con WordPress, la API REST y GraphQL.

Ya hemos visto cómo obtener resultado de la información contenida en nuestro ditio web a través de GraphQL, así que vamos a ver ahora cómo obtener esta misma información.

Desde la versión 4.7 ya tenemos integrada en WP la API REST, que nos permite atacar a un endpoint (una ruta de la API) para obtener la información contenida en nuestro sitio.

En este caso, para poder obtener la información deseada tendríamos que obtener la información que devuelve esta ruta:

https://nuestro-sitio-WordPress/wp-json/wp/v2

Esta acción nos devolvería información de todas las rutas que tenga nuestra aplicación configurada internamente. Estamos hablando de: /posts, /posts/id, /posts/parent/revisions, /pages , etc. En el caso de nuestro ejemplo tendríamos que consultar el nodo JSON /posts.

Supongo que ya habéis visto la diferencia por vosotros mismos.

Mientras GraphQL nos permite obtener la información que queremos exactamente, mediante el uso de la REST API tenemos que obtener todo el árbol de información que contiene nuestro sitio para posteriormente tratar esa información y obtener lo que necesitamos.

Los ahorros en termino de eficiencia a la hora de tratar los datos y cantidad de los mismos es cuantativa entre los dos modelos.

Si bien es verdad que se pueden generar otros endpoints que nos den una información más concisa, el hecho de crear una consulta que solo ataque a la información que necesitamos tiene muchas más ventajas en este caso.

Una herramienta que da mucho juego ¶

Si te ha llamado la antención el gestor de consultas de datos que más da qué hablar últimamente en el ecosistema WordPress (y fuera de él), en nuestra Academia Online tenemos una sesión LivePremium que va a hacer que seas un crack en esto de realizar consultas con GraphQL.

Abarcamos desde la instalación de plugins, diseño de consultas y páginación de resultados hasta la creación de un frontal VueJS que obtiene los datos a través de GraphQL.