Pierwsze kroki
Pierwsze krokiWprowadzenie do klienta Voyager

Wprowadzenie do klienta Voyager

Gato GraphQL udostępnia klienta GraphQL Voyager do interaktywnego wizualizowania schematu GraphQL. Otwórz go, klikając "Interactive Schema" w menu wtyczki:

Klient GraphQL Voyager

Voyager oferuje panoramiczny widok schematu GraphQL:

Wizualizacja schematu do odpytywania danych

Ułatwia on zrozumienie, jak wszystkie elementy schematu są ze sobą powiązane, używając strzałek do pokazania połączeń między typami:

Elementy schematu

Schemat posiada punkt startowy, czyli typ, od którego obliczane są wszystkie relacje. Domyślnie jest to root queries (w tym przypadku obsługiwany przez typ QueryRoot), wskazany w pływającym panelu na dole. Aby zwizualizować schemat pod kątem mutations, możemy wybrać odpowiedni typ root mutations (w tym przypadku MutationRoot):

Typy GraphQL w pływającym panelu

Przełączanie widoku z innego typu GraphQL

Widok przełączony na root mutations

Kliknięcie na typ w schemacie podświetla jego połączenia i wyświetla metadane jego pól (ten sam efekt uzyskuje się klikając na nazwę typu w lewym panelu bocznym):

Podświetlanie typu

Pole wyszukiwania w lewym panelu bocznym umożliwia filtrowanie elementów schematu:

Filtrowanie elementów schematu

Kliknięcie na połączenie podświetla je zarówno w schemacie, jak i w lewym panelu bocznym:

Podświetlanie połączenia

Możemy używać myszy (oraz w pewnym stopniu przycisków w prawym dolnym rogu ekranu) do nawigowania po grafie — powiększania i pomniejszania, przesuwania w dowolnym kierunku oraz skupiania się na elementach:

Nawigowanie po grafie

W pływającym panelu na dole dostępnych jest kilka dodatkowych opcji:

  • "Sort by alphabet" sortuje alfabetycznie wszystkie pola każdego typu
  • "Skip Relay" usuwa klasy opakowujące Relay
  • "Skip deprecated" ukrywa wszystkie przestarzałe pola
  • "Show leaf fields" wyświetla wszystkie pola, które nie są połączeniem

Dodatkowe opcje