El editor, explorador e IDE GraphiQL para una API con GraphQL

Escrito por picodotdev el .
java planeta-codigo programacion
Comentarios

GraphQL

Hace ya un tiempo escribí una serie de artículos sobre GraphQL para desarrollar una API en una aplicación como alternativa a desarrollarla basada en REST. En esa serie de artículos explicaba varios conceptos básicos e introductorios pero suficientes para desarrollar una API completamente funcional con GraphQL usando el lenguaje de programación Java. Sin embargo, sobre algunos otros conceptos y posibilidades de GraphQL no había escrito.

Uno de esas posibilidades de GraphQL es la herramienta GraphiQL que es un editor interactivo para construir consultas y explorar la API. Una de sus mayores ventajas es que ofrece asistencia contextual y proporciona mensajes de error en caso de que la sintaxis de la consulta sea errónea. En los artículos que escribí con anterioridad los ejemplos los hice usando el comando curl. Ahora que he visto y aprendido algunas pocas cosas más de GraphQL en este artículo explico como usar la herramienta GraphiQL como alternativa a curl.

GraphiQL en casi un IDE para crear consultas de GraphQL, está basado en JavaScript, se ejecutan en el navegador y para su funcionamiento solo hay que proporcionarle el endpoint de la API a probar.

En la página de este tutorial se explica cual es el código HTML necesario para el editor GraphiQL. Básicamente es un HTML que hay colocar en el caso de una aplicación Java en el directorio web de la aplicación, utilizando la página por defecto index.html se carga al acceder a la dirección http://localhost:8080/.

En el código del archivo index.html del ejemplo he tenido que cambiar estas dos cosas, una de ellas es utilizar un CDN para los recursos de GraphiQL y la otra en la función graphQLFetcher es que en este ejemplo el endpoint es /library en vez de /graphql.

Varias de las mismas consultas que hacía con curl en otros artículos es posible lanzarlas con GraphiQL. Es posible formatear correctamente una consulta con el botón prettify. Con en el enlace de documentación se puede explorar los tipos definidos en la API. Con funciones similares a un IDE ofrece errores de sintaxis, asistencia contextual e historial de consultas, en definitiva es una gran mejora sobre curl y su incorporación a la aplicación es muy sencilla.

El editor GraphiQL para una API con GraphQL

El código fuente completo del ejemplo puedes descargarlo del repositorio de ejemplos de Blog Bitix alojado en GitHub y probarlo en tu equipo ejecutando el comando ./gradlew run. Requiere Java 9+ o Docker.