Introductie tot de GraphiQL-client

Gato GraphQL biedt de GraphiQL-client om te communiceren met de GraphQL-service. Je opent hem door op "GraphiQL" te klikken in het menu van de plugin:

Met GraphiQL kun je GraphQL-queries samenstellen, uitvoeren en de respons bekijken:

​

Handleiding voor de GraphiQL-client

Zo gebruik je de GraphiQL-client om een GraphQL-query samen te stellen en uit te voeren.

Je stelt de GraphQL-query op in het paneel aan de linkerkant:

GraphiQL heeft syntaxiskleuring voor de GraphQL-syntaxis. Terwijl je de query begint op te stellen, zie je hoe de naam van de operatie, de opening- en sluitingshaakjes, velden, argumenten, directives en commentaar elk een eigen kleur hebben, waardoor de query overzichtelijker wordt:

Bij het eerste laden haalt GraphiQL de metadata van het GraphQL-schema op via introspectie. Dankzij de schemametadata biedt GraphiQL op elk moment tijdens het samenstellen van de query autocompletieopties aan:

Je kunt de schemametadata ook bekijken via de Documentation Explorer. Om hem te openen, klik je op de knop "Docs":

De Documentation Explorer verschijnt aan de rechterkant:

Door op de naam van een GraphQL-type te klikken, toont de Documentation Explorer de bijbehorende informatie:

• de beschrijving
• welke interfaces het implementeert
• de lijst van alle velden, inclusief:
  • welke argumenten ze accepteren
  • hun returntype (waarop je ook kunt klikken)
  • hun beschrijving

Op elk moment kun je ook zoeken naar en informatie opvragen over elk element uit het schema:

Als je over een element in de query zweeft, zie je de informatie ervan, en met ctrl (of cmd) + klikken wordt het in de Documentation Explorer getoond:

Door op het paneel "Query variables" onderaan te klikken, kun je variabelen definiëren om aan de query mee te geven, als een JSON-map van variable => value:

Om de GraphQL-query uit te voeren, klik je op de knop "Run" of druk je op ctrl (of cmd) + enter:

De GraphQL-respons wordt weergegeven in het centrale paneel:

In het bovenste paneel staan verschillende add-ons voor GraphiQL:

Door op elke add-on-knop te klikken, voer je een bepaalde actie uit:

• "Prettify" formatteert de GraphQL-query
• "History" toont de lijst van meest recente queries; door op een ervan te klikken, wordt die in de queryeditor geladen
• "Explorer" opent het GraphiQL Explorer-paneel

De GraphiQL Explorer is een uitstekende add-on. Hij toont de lijst van alle velden, en door erop te klikken worden ze aan de query in de editor toegevoegd, zodat je GraphQL-queries op een visuele manier kunt samenstellen: