Как пользоваться: GraphQL конструктор запросов
- Откройте Schema (SDL) и вставьте свою схему или используйте пример.
- Выберите Query, Mutation или Subscription.
- Отмечайте поля в дереве; раскрывайте объекты, чтобы выбрать вложенные поля, и заполняйте аргументы.
- Скопируйте готовый запрос, JSON переменных или вызов
fetch().
Как работает конструктор
Схема разбирается с помощью graphql-js и превращается в дерево, которое начинается с корневого типа выбранной операции. Отметка поля добавляет его в выборку; отметка поля-объекта раскрывает его, чтобы можно было выбрать вложенные поля. Заполненные аргументы становятся переменными с правильными GraphQL-типами ($id: ID!), поэтому запрос можно использовать повторно и он защищён от инъекций. Рядом автоматически генерируется JSON с переменными.
Советы
- Поля с типами-интерфейсами или объединениями показывают свои реализации как inline-фрагменты (
... on Book). - Обязательные аргументы помечены знаком
!; необязательные можно оставить пустыми, и они не попадут в запрос. - Для поиска нужного поля в большой схеме используйте поле фильтра.
Отформатировать или проверить существующий запрос можно в GraphQL-форматере и валидаторе, а ответ сервера посмотреть в JSON-просмотрщике.
Также ищут как: graphql query builder, graphql explorer, аналог graphql playground.
Инструменты, которые хорошо сочетаются с GraphQL конструктор запросов
- cURL в код — Вставьте команду curl из документации к API или пункт «Copy as cURL» из DevTools браузера, и вы получите готовый код для шести языков с сохранёнными заголовками, телом запроса и авторизацией.
- Валидатор OpenAPI / Swagger — Вставьте спецификацию API, чтобы проверить её по официальной схеме OpenAPI, найти битые ссылки и несогласованные параметры пути и увидеть все эндпоинты сразу.
- JSON в типы — Вставьте ответ API и получите готовые модели на 8 языках: TypeScript, Python (dataclass, TypedDict или Pydantic), Go, Java, C#, Kotlin, Swift и Rust.
- Валидатор JSON Schema — Вставьте схему и JSON, чтобы увидеть, какие значения нарушают какие правила, или сгенерируйте стартовую схему по примеру данных.
Часто задаваемые вопросы
Где взять SDL-схему?
Многие серверы отдают её по адресу
/graphql/schema или хранят в репозитории (schema.graphql). Также её можно выгрузить командой rover graph introspect или npx get-graphql-schema https://api.example.com/graphql.Конструктор отправляет запрос на мой API?
Нет. Конструктор только генерирует текст в вашем браузере. Скопируйте фрагмент fetch, чтобы выполнить его самостоятельно.
Поддерживаются ли фрагменты?
Для полей-интерфейсов и объединений генерируются inline-фрагменты для каждого возможного типа. Именованные фрагменты можно добавить вручную и проверить в GraphQL-форматере.
Можно ли установить GraphQL конструктор запросов как веб-приложение и пользоваться им офлайн?
Да. GraphQL конструктор запросов — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.