Introduction au client GraphiQL

Gato GraphQL fournit le client GraphiQL pour interagir avec le service GraphQL. Accédez-y en cliquant sur « GraphiQL » dans le menu du plugin :

GraphiQL permet de composer des requêtes GraphQL, de les exécuter et de visualiser leur réponse :

​

Guide du client GraphiQL

Voici comment utiliser le client GraphiQL pour composer et exécuter une requête GraphQL.

Nous composons la requête GraphQL dans le panneau de gauche :

GraphiQL dispose d'un surligneur de syntaxe pour la syntaxe GraphQL. Au fur et à mesure que nous composons la requête, nous pouvons voir comment le nom de l'opération, les accolades ouvrantes et fermantes, les champs, les arguments, les directives et les commentaires ont chacun une couleur distincte, nous aidant à comprendre la requête :

Lors du premier chargement, GraphiQL récupère les métadonnées du schéma GraphQL via l'introspection. Grâce aux métadonnées du schéma, à chaque instant pendant la composition de la requête, GraphiQL propose des options d'autocomplétion :

Nous pouvons également parcourir les métadonnées du schéma via l'Explorateur de documentation. Pour l'ouvrir, nous devons cliquer sur le bouton « Docs » :

L'Explorateur de documentation apparaîtra sur le côté droit :

En cliquant sur le nom du type GraphQL, l'Explorateur de documentation affichera ses informations :

• sa description
• les interfaces qu'il implémente
• la liste de tous ses champs, notamment :
  • les arguments qu'ils reçoivent
  • leur type de retour (sur lequel on peut également cliquer)
  • leur description

À tout moment, nous pouvons également rechercher et récupérer des informations sur n'importe quel élément du schéma :

Survoler n'importe quel élément de la requête affichera ses informations, et ctrl (ou cmd) + clic permettra de l'afficher dans l'Explorateur de documentation :

En cliquant sur le panneau « Query variables » en bas, nous pouvons composer des variables à passer à la requête, sous forme d'une carte JSON de variable => value :

Pour exécuter la requête GraphQL, nous appuyons sur le bouton « Run », ou nous pressons ctrl (ou cmd) + enter :

La réponse GraphQL s'affichera dans le panneau central :

Dans le panneau supérieur, il y a différents add-ons pour GraphiQL :

Cliquer sur chaque bouton d'add-on effectuera une certaine action :

• « Prettify » formate la requête GraphQL
• « History » affiche la liste des requêtes précédentes les plus récentes, et cliquer sur l'une d'elles l'insérera dans l'éditeur de requêtes
• « Explorer » ouvre le panneau GraphiQL Explorer

Le GraphiQL Explorer est un excellent add-on. Il affiche la liste de tous les champs, et cliquer dessus les ajoute à la requête dans l'éditeur, permettant de composer la requête GraphQL de façon visuelle :