Einführung in den GraphiQL-Client

Gato GraphQL stellt den GraphiQL-Client bereit, um mit dem GraphQL-Dienst zu interagieren. Du öffnest ihn, indem du im Menü des Plugins auf „GraphiQL" klickst:

GraphiQL ermöglicht es, GraphQL-queries zu verfassen, auszuführen und deren Antwort anzuzeigen:

​

Leitfaden zum GraphiQL-Client

So verwendest du den GraphiQL-Client, um eine GraphQL-query zu verfassen und auszuführen.

Wir verfassen die GraphQL-query im Panel auf der linken Seite:

GraphiQL verfügt über einen Syntax-Highlighter für die GraphQL-Syntax. Während wir die query verfassen, erkennen wir, dass der Operationsname, die öffnenden und schließenden Klammern, Felder, Argumente, Direktiven und Kommentare jeweils eine eigene Farbe haben, was uns hilft, die query zu verstehen:

Beim ersten Laden ruft GraphiQL die Metadaten des GraphQL-Schemas per Introspektion ab. Dank der Schema-Metadaten schlägt GraphiQL jederzeit während der query-Erstellung Autocomplete-Optionen vor:

Wir können die Schema-Metadaten auch über den Documentation Explorer durchsuchen. Um ihn zu öffnen, müssen wir auf die Schaltfläche „Docs" klicken:

Der Documentation Explorer erscheint auf der rechten Seite:

Wenn du auf den Namen des GraphQL-Typs klickst, zeigt der Documentation Explorer dessen Informationen an:

• seine Beschreibung
• welche Interfaces er implementiert
• die Liste aller seiner Felder, einschließlich:
  • welche Argumente sie entgegennehmen
  • ihren Rückgabetyp (auf den wir ebenfalls klicken können)
  • ihre Beschreibung

Jederzeit können wir auch nach einem beliebigen Element des Schemas suchen und Informationen dazu abrufen:

Wenn du mit der Maus über ein Element der query fährst, werden dessen Informationen angezeigt; ctrl (oder cmd) + Klick zeigt es im Documentation Explorer an:

Durch Klicken auf das Panel „Query variables" unten können wir Variablen für die query definieren, als JSON-Map von variable => value:

Um die GraphQL-query auszuführen, drücken wir auf die Schaltfläche „Run" oder drücken ctrl (oder cmd) + enter:

Die GraphQL-Antwort wird im mittleren Panel angezeigt:

Im oberen Panel befinden sich verschiedene Add-ons für GraphiQL:

Ein Klick auf die jeweilige Add-on-Schaltfläche führt eine bestimmte Aktion aus:

• „Prettify" formatiert die GraphQL-query
• „History" zeigt die Liste der zuletzt verwendeten queries an; ein Klick auf eine davon fügt sie in den query-Editor ein
• „Explorer" öffnet das GraphiQL-Explorer-Panel

Der GraphiQL Explorer ist ein großartiges Add-on. Er zeigt die Liste aller Felder an; ein Klick auf ein Feld fügt es zur query im Editor hinzu und ermöglicht so das visuelle Erstellen von GraphQL-queries: