Introductie tot de Voyager-client
Gato GraphQL biedt de GraphQL Voyager-client om het GraphQL-schema interactief te visualiseren. Open hem door op "Interactive Schema" te klikken in het menu van de plugin:
Voyager geeft een panoramisch overzicht van het GraphQL-schema:
Het maakt het eenvoudig te begrijpen hoe alle elementen in het schema zich tot elkaar verhouden, met pijlen die de verbindingen tussen types laten zien:
Het schema heeft een startpunt, dat wil zeggen een type van waaruit alle relaties worden berekend. Standaard is dit de query-root (in dit geval afgehandeld via het type QueryRoot), wat wordt aangegeven in het zwevende paneel onderaan. Om het schema te visualiseren met betrekking tot mutations, kunnen we het bijbehorende mutation-root-type selecteren (in dit geval MutationRoot):
Door op een type in het schema te klikken, worden de verbindingen ervan uitgelicht en worden de metadata van de velden weergegeven (hetzelfde effect treedt op wanneer je op de naam van het type in het linker zijpaneel klikt):
Het zoekveld in het linker zijpaneel maakt het mogelijk om de schema-elementen te filteren:
Door op een verbinding te klikken, wordt deze uitgelicht, zowel in het schema als in het linker zijpaneel:
Je kunt de muis gebruiken (en in zekere mate de knoppen rechtsonder op het scherm) om door de grafiek te navigeren: in- en uitzoomen, in elke richting bewegen en op elementen focussen:
In het zwevende paneel onderaan zijn een aantal extra opties beschikbaar:
- "Sort by alphabet" sorteert alle velden in elk type alfabetisch
- "Skip Relay" verwijdert de wrapper-klassen van Relay
- "Skip deprecated" verbergt alle verouderde velden
- "Show leaf fields" toont alle velden die geen verbinding zijn
