Loading…

Про інструмент Онлайн форматувальник GraphQL

Зберігайте ваші SDL GraphQL та операції читабельними та послідовними. Цей онлайн форматувальник 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

Відформатуйте, перевірте та експортуйте

Натисніть Format, щоб застосувати зміни. Перевірте результат у панелі попереднього перегляду, потім скопіюйте його назад у ваш редактор або завантажте відформатований файл.

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

Підтримувані вхідні дані

Розроблено для стандартних GraphQL схем та документів операцій.

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

Рушій форматування

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

Доступні параметри (відображені на Prettier)

ПараметрПоведінкаТипові значення
Стиль відступуВиберіть між пробілами та табуляціямиspace (за замовчуванням) або tab
Розмір відступуКількість пробілів на рівень відступу (при використанні пробілів)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 для інструментів генерації коду
# До
тип Користувач{ id:ID! ім'я:Рядок!}

# Після
тип Користувач {
  id: ID!
  ім'я: Рядок!
}

Фронтенд Операції та Фрагменти

  • Уніфікуйте спільні запити в кількох додатках або пакетах
  • Зробіть вкладені вибірки легшими для перегляду під час налагодження
  • Підтримуйте фрагменти документації та приклади в ігрових майданчиках акуратно відформатованими

Тести, Фікстури та Інструменти

  • Стандартизуйте GraphQL фікстури, що використовуються в снапшот-тестах
  • Інтегруйте форматування в pre-commit хуки або CI завдання
  • Подавайте чисті документи в інструменти валідації або порівняння схем

❓ Frequently Asked Questions

Що саме змінює форматер GraphQL?

Він переструктурує ваші документи GraphQL відповідно до правил GraphQL Prettier: відступи, розриви рядків, пробіли навколо пунктуації та розміщення вибірок і полів. Він не перейменовує поля, не додає аргументи та не змінює семантику схеми.

Чи підтримує він як операції, так і схеми 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