Loading…

О сервисе Онлайн-форматтер GraphQL

Сохраняйте ваши GraphQL SDL и операции читаемыми и согласованными. Этот онлайн-форматтер GraphQL использует парсер GraphQL от Prettier для перерасстановки отступов, переноса строк и нормализации ваших документов. Он работает в браузере, когда это возможно, и переключается на серверный форматтер при необходимости, чтобы вы получали надежный результат без необходимости задумываться о инструментах.

Что делает этот форматтер GraphQL

  • Использует парсер GraphQL от Prettier для применения единообразного, соответствующего стандартам сообщества форматирования
  • Поддерживает запросы, мутации, подписки, фрагменты и полные схемы SDL (типы, интерфейсы, объединения, перечисления, входные данные, директивы)
  • Настраиваемые отступы: выберите пробелы или табы и настройте размер отступа (1–8)
  • Опциональный контроль длины строки / переноса через настраиваемую ширину колонки
  • Сохраняет описания (`"""…"""`) и встроенные комментарии неизменными при нормализации их расположения
  • Проверяет структуру вашего документа GraphQL как часть форматирования; неверный синтаксис вызовет ошибки вместо бесшумного искажения кода
  • Гибридное выполнение: запускает Prettier в браузере, когда это возможно, и переключается на серверный форматтер при необходимости
  • Вставьте или загрузите файлы `.graphql` / `.gql`, затем просмотрите, скопируйте или скачайте отформатированный результат

📝 Как форматировать GraphQL онлайн for graphql-formatter

1

Вставьте или загрузите ваш GraphQL

Вставьте вашу GraphQL-схему или запросы в редактор или перетащите файл `.graphql` / `.gql`. Форматирование работает как для SDL, так и для документов операций.

2

Настройте параметры форматирования

Выберите пробелы или табуляцию, установите размер отступа и настройте предпочтительную длину строки. Эти параметры передаются в GraphQL-форматтер Prettier.

3

Отформатируйте, проверьте и экспортируйте

Нажмите «Форматировать», чтобы применить изменения. Проверьте результат в панели предпросмотра, затем скопируйте его обратно в редактор или скачайте отформатированный файл.

Технические характеристики

Поддерживаемый ввод

Предназначен для стандартных GraphQL-схем и документов операций.

ТипПримерыПримечания
Схема SDLschema.graphql, schema.gqlТипы, интерфейсы, объединения, перечисления, входные данные, директивы, определение схемы
Операцииqueries.graphql, app.gqlЗапросы, мутации, подписки и фрагменты
Расширениярасширения схемы в отдельных файлахнапример, блоки `extend type Query { … }`

Движок форматирования

Форматирование выполняется с использованием GraphQL-поддержки Prettier. В большинстве случаев Prettier работает в браузере через облегченную среду выполнения. Если плагин GraphQL не может быть разрешен в текущей среде, форматировщик прозрачно переключается на серверный воркер Prettier.

Доступные опции (сопоставлены с Prettier)

ОпцияПоведениеТипичные значения
Стиль отступаВыбор между пробелами и табуляциейпробел (по умолчанию) или табуляция
Размер отступаКоличество пробелов на уровень отступа (при использовании пробелов)1–8, по умолчанию: 2
Длина строкиЦелевой столбец для переноса/разрыва длинных выборок0–120 (0 ≈ фактически без переноса)

Ограничения и производительность

Инструмент настроен для типичных схем GraphQL и файлов операций. Запросы размером от нескольких сотен КБ до ~2 МБ обычно безопасны; очень большие документы могут столкнуться с таймаутами или ограничениями по размеру.

Конфиденциальность и безопасность

Документы GraphQL форматируются либо в вашем браузере, либо на бэкенде форматера encode64. Они не выполняются и не отправляются сторонним сервисам. Для конфиденциальных схем вы можете воспроизвести ту же конфигурацию локально с помощью Prettier.

Эквивалент командной строки (Prettier)

Если у вас уже установлены Node.js и Prettier, вы можете воспроизвести это поведение локально.

Node.js (все платформы)

Отформатировать файл схемы GraphQL на месте

npx prettier --write schema.graphql

Prettier автоматически определяет GraphQL по расширению файла.

Форматирование с пользовательским отступом и длиной строки

npx prettier --write schema.graphql --tab-width 2 --use-tabs false --print-width 80

Соответствует параметрам отступов и переноса, доступным в онлайн-инструменте.

Форматирование из stdin (например, переданное из другого инструмента)

cat input.graphql | npx prettier --stdin-filepath input.graphql

Полезно в shell-скриптах, CI-пайплайнах или Git-хуках.

Типичные сценарии использования форматера GraphQL

Разработка API-схем

  • Поддержание единого форматирования больших файлов схем для удобной навигации
  • Сокращение шумных различий в пробелах в PR схем
  • Подготовка чистого SDL для инструментов генерации кода
# До
type User{ id:ID! name:String!}

# После
type User {
  id: ID!
  name: String!
}

Фронтенд-операции и фрагменты

  • Унификация общих запросов в нескольких приложениях или пакетах
  • Упрощение чтения вложенных выборок при отладке
  • Поддержание красивого форматирования сниппетов документации и примеров в playground

Тесты, фикстуры и инструменты

  • Стандартизация GraphQL-фикстур, используемых в снапшот-тестах
  • Интеграция форматирования в pre-commit хуки или CI-задачи
  • Подача чистых документов в инструменты валидации или сравнения схем

❓ Frequently Asked Questions

Что именно меняет форматер GraphQL?

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

Поддерживает ли он и операции, и схемы SDL?

Да. Форматер работает со стандартными операциями GraphQL (запросы, мутации, подписки, фрагменты) и языком определения схем (типы, интерфейсы, перечисления, объединения, входные данные, директивы, определения схем и расширения).

Сохраняются ли комментарии и строки описания?

Да. Строки описания в тройных кавычках (`"""…"""`) и встроенные комментарии `#` сохраняются. Форматер может переформатировать их или настроить окружающие пробелы, но не удаляет их намеренно.

Выполняется ли мой код GraphQL?

Нет. Инструмент анализирует ваш GraphQL как текст для переформатирования, но не выполняет запросы и не подключается к какому-либо серверу GraphQL.

Где выполняется форматирование: на клиенте или сервере?

Форматировщик предпочитает запускать Prettier непосредственно в вашем браузере для отзывчивости. Если необходимый плагин GraphQL не может быть загружен там, он переключается на воркер Prettier на сервере с теми же настройками.

Это бесплатно?

Да. Инструмент бесплатный с защитой от злоупотреблений для поддержания стабильной производительности. Для интенсивных или частных рабочих нагрузок используйте ту же конфигурацию с Prettier в вашей собственной среде.

Pro Tips

Best Practice

Используйте этот форматировщик для стандартизации устаревших схем перед добавлением линтинга или критических изменений; это значительно упрощает последующий просмотр различий.

Best Practice

Согласуйте настройки онлайн-инструмента (размер отступа и длина строки) с конфигурацией Prettier вашего проекта, чтобы локальное и веб-форматирование совпадали.

Best Practice

Извлекайте длинные встроенные строки GraphQL из кода в файлы `.graphql`, чтобы их можно было единообразно форматировать и повторно использовать.

Best Practice

Сочетайте форматирование с линтингом (например, GraphQL ESLint), чтобы выявлять проблемы схем и запросов, выходящие за рамки пробелов и переносов.

Additional Resources

Спецификация GraphQL
Documentation
Prettier – Форматирование GraphQL
Documentation
Официальная документация GraphQL – Обучение
Documentation
GraphQL ESLint (Правила линтинга)
Documentation

Other Tools