Softonic

Построитель запросов GraphQL

Шаг 1 / 2
Аргументы
Собрать запрос

Писать операцию GraphQL вручную значит следить за фигурными скобками, аргументами и отступами. Этот конструктор собирает документ за вас: выберите запрос, мутацию или подписку, назовите операцию, укажите корневое поле, добавьте аргументы и перечислите нужные поля. Вы получите отформатированную операцию, которую можно сразу вставить в Apollo, urql или GraphiQL.

Как создать операцию в GraphQL

  1. 1

    Выберите тип операции

    Выберите запрос, мутацию или подписку в раскрывающемся списке. Это определяет, какой вид операции выполнит сервер.

  2. 2

    Назовите операцию

    Дайте ей имя, например GetUser, чтобы сервер мог логировать и кэшировать её. Имя необязательно; конструктор работает и без него.

  3. 3

    Укажите корневое поле

    Введите поле, которое хотите вызвать, например user, createPost или orderUpdated.

  4. 4

    Добавьте аргументы

    Добавьте пары ключ-значение, такие как id: "123" или id: $id. Строки с пустым ключом пропускаются.

  5. 5

    Перечислите поля и скопируйте

    Введите по одному полю в строку, соберите запрос и скопируйте отформатированный документ в буфер обмена.

Работа с документами GraphQL

Документ GraphQL это набор из одной или нескольких операций плюс все фрагменты, на которые они ссылаются. Каждая операция называет корневое поле типа Query, Mutation или Subscription, а сервер разрешает запрошенный вами набор выборки. Конструктор пишет текст операции за вас, но не знает вашей схемы, поэтому перед запуском операции сверьте каждое имя поля и аргумента со своим API.

Строение операции

Часть Цель Пример
Тип операции Запрос, мутация или подписка query, mutation, subscription
Имя операции Используется для кэширования и журналов GetUserById
Аргументы Значения, передаваемые корневому полю user(id: "123")
Набор выборки Поля и вложенные выборки { user(id: "123") { name posts { title } } }
Переменные Типизированные входные данные, объявленные вместе с именем операции query GetUser($id: ID!) { user(id: $id) { name } }

Распространённые ошибки

  • Обязательные переменные заканчиваются на !. Если пропустить его для аргументов, помеченных в схеме как NonNull, ошибка проверки возникнет ещё до запуска резолвера.
  • Текстовым аргументам нужны кавычки. Значение вида 123 это число; текстовое значение нужно записать в строке аргумента как "123" в двойных кавычках.
  • Типы-объединения и интерфейсы требуют встроенных фрагментов ... on TypeName для чтения полей, специфичных для конкретного типа.
  • Псевдонимы обязательны, когда вы запрашиваете одно и то же поле дважды с разными аргументами, например today: stats(period: DAY) и week: stats(period: WEEK).
  • Соединения (спецификация Relay) предоставляют edges { node { ... } } и pageInfo { endCursor hasNextPage }; пропуск любого из них ломает пагинацию.

Советы

  • Делайте операции небольшими и именованными, чтобы Apollo Client мог кэшировать их по отдельности.
  • Меняющиеся значения передавайте как переменные, а не литералы: тогда сервер разберёт документ один раз и переиспользует его. Объявляйте их рядом с именем операции, например query GetUser($id: ID!).
  • Если полю нужно несколько аргументов, запишите их в одной строке аргумента через запятые, например filter: { status: ACTIVE } в качестве значения.
  • Конструктор выводит ровно тот текст, который вы задали. Если операция не сработала, сначала сверьте имена полей с текущей схемой.

Часто задаваемые вопросы

Нет. Он только форматирует текст, который вы вводите; вызывать точку подключения не нужно, и схема не требуется. Заполните части операции, и конструктор соберёт документ за вас.

Да. В раскрывающемся списке операции переключайтесь между запросом, мутацией и подпиской. Всё остальное работает одинаково: имя, корневое поле, аргументы и поля.

Добавьте строки в раздел аргументов. Ключ это имя аргумента, а значение это то, что вы передаёте, например id: “123” или id: $id. Строки с пустым ключом игнорируются. Если вы вводите переменную вроде $id, объявите её сами рядом с именем операции, например query GetUser($id: ID!).

Конструктор выводит ровно тот текст, который вы ввели. Обычно такая ошибка означает, что имя поля или аргумента не совпадает со схемой вашего сервера: сравните корневое поле и каждое имя поля со своим API и исправьте опечатки.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Шпаргалка по регулярным выражениям

Поисковый справочник регулярных выражений для JavaScript, PCRE2/PHP, Python re и .NET. Сравнивайте токены, синтаксис движков, якоря, группы, проверки и флаги.

Инструмент доступен на других языках