Introducción al cliente GraphiQL
Gato GraphQL proporciona el cliente GraphiQL para interactuar con el servicio GraphQL. Accede a él haciendo clic en "GraphiQL" en el menú del plugin:
GraphiQL permite componer consultas GraphQL, ejecutarlas y visualizar su respuesta:
Guía del cliente GraphiQL
Así es cómo usar el cliente GraphiQL para componer y ejecutar una consulta GraphQL.
Componemos la consulta GraphQL en el panel del lado izquierdo:
GraphiQL dispone de resaltado de sintaxis para la sintaxis GraphQL. Al empezar a componer la consulta, podemos apreciar cómo el nombre de la operación, los corchetes de apertura y cierre, los campos, los argumentos, las directivas y los comentarios tienen todos un color distinto, ayudándonos a comprender la consulta:
Al cargarse por primera vez, GraphiQL recuperará los metadatos del esquema GraphQL, mediante introspección. Gracias a los metadatos del esquema, en cada momento mientras se compone la consulta, GraphiQL sugerirá opciones de autocompletado:
También podemos navegar los metadatos del esquema mediante el Explorador de Documentación. Para abrirlo, debemos hacer clic en el botón "Docs":
El Explorador de Documentación aparecerá en el lado derecho:
Al hacer clic en el nombre del tipo GraphQL, el Explorador de Documentación mostrará su información:
- su descripción
- qué interfaces implementa
- la lista de todos sus campos, incluyendo:
- qué argumentos reciben
- su tipo de retorno (sobre el que también podemos hacer clic)
- su descripción
En cualquier momento, también podemos buscar y recuperar información de cualquier elemento del esquema:
Al pasar el ratón por encima de cualquier elemento de la consulta se mostrará su información, y haciendo ctrl (o cmd) + clic se mostrará en el Explorador de Documentación:
Al hacer clic en el panel "Query variables" en la parte inferior, podemos componer variables para pasar a la consulta, como un mapa JSON de variable => value:
Para ejecutar la consulta GraphQL, presionamos el botón "Run", o pulsamos ctrl (o cmd) + enter:
La respuesta GraphQL se mostrará en el panel central:
En el panel superior hay diferentes add-ons para GraphiQL:
Al hacer clic en cada botón de add-on se realizará una determinada acción:
- "Prettify" formatea la consulta GraphQL
- "History" muestra la lista de consultas previas más recientes, y al hacer clic en cualquiera de ellas se introducirá en el editor de consultas
- "Explorer" abre el panel del GraphiQL Explorer
El GraphiQL Explorer es un excelente add-on. Muestra la lista de todos los campos, y al hacer clic en ellos se añaden a la consulta en el editor, permitiendo componer la consulta GraphQL de forma visual: