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 и исправьте опечатки.

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

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 под чистый JavaScript, React или Vue: TypeScript, Babel, CSS или Sass, изображения, HtmlWebpackPlugin, dev-сервер и команда npm install.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

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