Wprowadzenie do klienta GraphiQL

Gato GraphQL udostępnia klienta GraphiQL do interakcji z usługą GraphQL. Aby uzyskać do niego dostęp, kliknij „GraphiQL" w menu wtyczki:

GraphiQL umożliwia tworzenie queries GraphQL, ich wykonywanie i przeglądanie odpowiedzi:

​

Przewodnik po kliencie GraphiQL

Oto jak używać klienta GraphiQL do tworzenia i wykonywania queries GraphQL.

Query GraphQL tworzymy w panelu po lewej stronie:

GraphiQL posiada podświetlanie składni dla składni GraphQL. Gdy zaczynamy tworzyć query, możemy zauważyć, że nazwa operacji, nawiasy otwierające i zamykające, pola, argumenty, dyrektywy i komentarze mają odrębne kolory, co ułatwia zrozumienie query:

Przy pierwszym załadowaniu GraphiQL pobiera metadane schematu GraphQL poprzez introspekcję. Dzięki metadanym schematu, w każdej chwili podczas tworzenia query, GraphiQL wyświetla podpowiedzi autocomplete:

Metadane schematu możemy również przeglądać za pomocą Documentation Explorer. Aby go otworzyć, należy kliknąć przycisk „Docs":

Documentation Explorer pojawi się po prawej stronie:

Klikając na nazwę typu GraphQL, Documentation Explorer wyświetli jego informacje:

• jego opis
• jakie interfejsy implementuje
• listę wszystkich jego pól, w tym:
  • jakie argumenty przyjmują
  • ich typ zwracany (na który również można kliknąć)
  • ich opis

W każdej chwili możemy również wyszukać i pobrać informacje o dowolnym elemencie ze schematu:

Najechanie kursorem na dowolny element query spowoduje wyświetlenie jego informacji, a ctrl (lub cmd) + kliknięcie na niego wyświetli go w Documentation Explorer:

Klikając panel „Query variables" u dołu, możemy definiować zmienne przekazywane do query w postaci mapy JSON variable => value:

Aby wykonać query GraphQL, naciskamy przycisk „Run" lub używamy skrótu ctrl (lub cmd) + enter:

Odpowiedź GraphQL zostanie wyświetlona w centralnym panelu:

W górnym panelu znajdują się różne dodatki (add-ons) dla GraphiQL:

Kliknięcie każdego przycisku dodatku spowoduje wykonanie określonej akcji:

• „Prettify" formatuje query GraphQL
• „History" wyświetla listę ostatnio używanych queries, a kliknięcie którejkolwiek z nich wstawi ją do edytora queries
• „Explorer" otwiera panel GraphiQL Explorer

GraphiQL Explorer to doskonały dodatek. Wyświetla listę wszystkich pól, a kliknięcie na nie dodaje je do query w edytorze, umożliwiając tworzenie queries GraphQL w sposób wizualny: