Введение в клиент GraphiQL

Gato GraphQL предоставляет клиент GraphiQL для взаимодействия с сервисом GraphQL. Откройте его, нажав на «GraphiQL» в меню плагина:

GraphiQL позволяет составлять GraphQL queries, выполнять их и просматривать ответы:

​

Руководство по клиенту GraphiQL

Вот как использовать клиент GraphiQL для составления и выполнения GraphQL query.

Мы составляем GraphQL query на панели с левой стороны:

GraphiQL поддерживает подсветку синтаксиса для синтаксиса GraphQL. Когда мы начинаем составлять query, мы видим, как имя операции, открывающие и закрывающие скобки, поля, аргументы, директивы и комментарии выделены разными цветами — это помогает разобраться в структуре query:

При первой загрузке GraphiQL получает метаданные схемы GraphQL с помощью интроспекции. Благодаря метаданным схемы в любой момент при составлении query GraphiQL предлагает варианты автодополнения:

Метаданные схемы также можно просматривать в Проводнике документации. Чтобы открыть его, нажмите кнопку «Docs»:

Проводник документации появится с правой стороны:

Нажав на имя типа GraphQL, Проводник документации отобразит его информацию:

• описание типа
• какие интерфейсы он реализует
• список всех его полей, включая:
  • какие аргументы они принимают
  • их возвращаемый тип (на который тоже можно нажать)
  • их описание

В любой момент можно также выполнить поиск и получить информацию о любом элементе схемы:

При наведении курсора на любой элемент query отображается его информация, а нажатие ctrl (или cmd) + клик откроет его в Проводнике документации:

Нажав на панель «Query variables» внизу, можно задать переменные для передачи в query в виде JSON-карты variable => value:

Чтобы выполнить GraphQL query, нажмите кнопку «Run» или используйте сочетание клавиш ctrl (или cmd) + enter:

Ответ GraphQL отобразится на центральной панели:

На верхней панели расположены различные дополнения для GraphiQL:

Нажатие на каждую кнопку дополнения выполняет определённое действие:

• «Prettify» форматирует GraphQL query
• «History» отображает список последних выполненных queries, и нажатие на любой из них вставляет его в редактор queries
• «Explorer» открывает панель GraphiQL Explorer

GraphiQL Explorer — отличное дополнение. Оно отображает список всех полей, и нажатие на них добавляет их в query в редакторе, позволяя составлять GraphQL query визуальным способом: