Kostenloser GraphQL-Formatter | Prettier-basierte Formatierung für Abfragen & Schemata

Loading…

Über Online GraphQL-Formatter

Halten Sie Ihre GraphQL-SDL und -Operationen lesbar und konsistent. Dieser Online-GraphQL-Formatter verwendet Prettiers GraphQL-Parser, um Ihre Dokumente neu einzurücken, umzubrechen und zu normalisieren. Er läuft im Browser, wenn möglich, und greift bei Bedarf auf einen Server-Formatter zurück, sodass Sie zuverlässige Ausgaben erhalten, ohne über die Werkzeuge nachdenken zu müssen.

Was dieser GraphQL-Formatter leistet

Verwendet Prettiers GraphQL-Parser, um konsistente, community-standardisierte Formatierung anzuwenden
Unterstützt Abfragen, Mutationen, Subscriptions, Fragmente und vollständige Schema-SDL (Typen, Interfaces, Unions, Enums, Inputs, Direktiven)
Anpassbare Einrückung: Wählen Sie Leerzeichen oder Tabs und konfigurieren Sie die Einrückungsgröße (1–8)
Optionale Zeilenlängen-/Umbruchsteuerung über eine konfigurierbare Spaltenbreite
Bewahrt Beschreibungen (`"""…"""`) und Inline-Kommentare intakt, während deren Layout normalisiert wird
Validiert Ihre GraphQL-Dokumentstruktur als Teil der Formatierung; ungültige Syntax zeigt Fehler an, anstatt Code stillschweigend zu verstümmeln
Hybride Ausführung: Führt Prettier im Browser aus, wenn verfügbar, und greift bei Bedarf auf einen Server-Formatter zurück
Fügen Sie `.graphql`-/`.gql`-Dateien ein oder laden Sie sie hoch, dann sehen Sie sich die formatierte Ergebnisvorschau an, kopieren oder laden Sie sie herunter

📝 So formatieren Sie GraphQL online for graphql-formatter

Fügen Sie Ihr GraphQL ein oder laden Sie es hoch

Fügen Sie Ihr GraphQL-Schema oder Ihre Abfragen in den Editor ein oder legen Sie eine `.graphql`- oder `.gql`-Datei ab. Der Formatierer funktioniert sowohl für SDL- als auch für Operationsdokumente.

Formatierungsoptionen anpassen

Wählen Sie Leerzeichen oder Tabs, legen Sie die Einzugsgröße fest und konfigurieren Sie Ihre bevorzugte Zeilenlänge. Diese Optionen werden an Prettiers GraphQL-Formatierer übergeben.

Formatieren, überprüfen & exportieren

Klicken Sie auf Formatieren, um die Änderungen anzuwenden. Überprüfen Sie das Ergebnis im Vorschaufenster und kopieren Sie es dann zurück in Ihren Editor oder laden Sie die formatierte Datei herunter.

Technische Spezifikationen

Unterstützte Eingaben

Entwickelt für standardmäßige GraphQL-Schema- und Operationsdokumente.

Typ	Beispiele	Hinweise
Schema SDL	schema.graphql, schema.gql	Typen, Schnittstellen, Unions, Aufzählungen, Eingaben, Direktiven, Schemadefinition
Operationen	queries.graphql, app.gql	Abfragen, Mutationen, Abonnements und Fragmente
Erweiterungen	Schemaerweiterungen in separaten Dateien	z.B. `extend type Query { … }`-Blöcke

Formatierungs-Engine

Die Formatierung erfolgt mit Prettiers GraphQL-Unterstützung. In den meisten Fällen läuft Prettier im Browser über eine leichtgewichtige Laufzeitumgebung. Wenn das GraphQL-Plugin in der aktuellen Umgebung nicht aufgelöst werden kann, wechselt der Formatierer transparent auf einen serverseitigen Prettier-Worker.

Verfügbare Optionen (auf Prettier abgebildet)

Option	Verhalten	Typische Werte
Einzugsstil	Wahl zwischen Leerzeichen und Tabs	Leerzeichen (Standard) oder Tab
Einzugsgröße	Anzahl der Leerzeichen pro Einzugsebene (bei Verwendung von Leerzeichen)	1–8, Standard: 2
Zeilenlänge	Zielspalte für das Umbrechen langer Auswahlen	0–120 (0 ≈ effektiv kein Umbruch)

Grenzwerte & Leistung

Das Tool ist für typische GraphQL-Schemata und Operationsdateien optimiert. Anfragen im Bereich von einigen hundert KB bis ~2 MB sind generell sicher; extrem große Dokumente können auf Timeouts oder Größenbeschränkungen stoßen.

Datenschutz & Sicherheit

GraphQL-Dokumente werden entweder in Ihrem Browser oder auf dem Formatierungs-Backend von encode64 formatiert. Sie werden nicht ausgeführt oder an Drittanbieterdienste gesendet. Für sensible Schemata können Sie dieselbe Konfiguration lokal mit Prettier nachbilden.

Befehlszeilen-Äquivalent (Prettier)

Wenn Sie bereits Node.js und Prettier installiert haben, können Sie dieses Verhalten lokal reproduzieren.

Node.js (alle Plattformen)

Eine GraphQL-Schemadatei direkt formatieren

npx prettier --write schema.graphql

Prettier erkennt GraphQL automatisch anhand der Dateierweiterung.

Mit benutzerdefinierter Einrückung und Zeilenlänge formatieren

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

Spiegelt die Einrückungs- und Umbruchoptionen des Online-Tools wider.

Von stdin formatieren (z.B. von einem anderen Tool gepiped)

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

Nützlich in Shell-Skripten, CI-Pipelines oder Git-Hooks.

Häufige Anwendungsfälle für GraphQL-Formatierer

API-Schema-Entwicklung

Große Schemadateien konsistent formatieren für einfachere Navigation
Störende Leerzeichen-Unterschiede in Schema-PRs reduzieren
Saubere SDL für Codegenerierungstools vorbereiten

# Vorher
type User{ id:ID! name:String!}

# Nachher
type User {
  id: ID!
  name: String!
}

Frontend-Operationen & Fragmente

Gemeinsame Abfragen über mehrere Apps oder Pakete hinweg normalisieren
Verschachtelte Auswahlen beim Debuggen leichter lesbar machen
Dokumentationsausschnitte und Playground-Beispiele gut formatiert halten

Tests, Fixtures & Tooling

GraphQL-Fixtures für Snapshot-Tests standardisieren
Formatierung in Pre-Commit-Hooks oder CI-Jobs integrieren
Saubere Dokumente in Schema-Validierungs- oder Diff-Tools einspeisen

❓ Frequently Asked Questions

Was ändert der GraphQL-Formatierer tatsächlich?

Er strukturiert Ihre GraphQL-Dokumente gemäß Prettiers GraphQL-Regeln neu: Einrückung, Zeilenumbrüche, Abstände um Interpunktion und das Layout von Auswahlen und Feldern. Es werden keine Felder umbenannt, Argumente hinzugefügt oder Schema-Semantik geändert.

Unterstützt es sowohl Operationen als auch Schema-SDL?

Ja. Der Formatierer funktioniert für Standard-GraphQL-Operationen (Abfragen, Mutationen, Subscriptions, Fragmente) und Schema-Definitionssprache (Typen, Interfaces, Enums, Unions, Inputs, Direktiven, Schema-Definitionen und -Erweiterungen).

Werden Kommentare und Beschreibungszeichenfolgen beibehalten?

Ja. Dreifach-gekennzeichnete Beschreibungszeichenfolgen (`"""…"""`) und Inline-`#`-Kommentare werden beibehalten. Der Formatierer kann sie umbrechen oder umgebende Leerzeichen anpassen, entfernt sie aber nicht absichtlich.

Wird mein GraphQL-Code ausgeführt?

Nein. Das Tool analysiert Ihren GraphQL-Code als Text, um ihn neu zu formatieren, führt jedoch keine Abfragen aus oder verbindet sich mit einem GraphQL-Server.

Wo läuft die Formatierung: Client oder Server?

Der Formatierer bevorzugt das direkte Ausführen von Prettier in Ihrem Browser für Reaktionsschnelligkeit. Falls das erforderliche GraphQL-Plugin dort nicht geladen werden kann, greift es auf einen Prettier-Worker auf dem Server mit denselben Optionen zurück.

Ist die Nutzung kostenlos?

Ja. Das Tool ist kostenlos mit Fair-Use-Schutz, um die Leistung stabil zu halten. Für umfangreiche oder private Arbeitslasten spiegeln Sie dieselbe Konfiguration mit Prettier in Ihrer eigenen Umgebung.

Pro Tips

Best Practice

Verwenden Sie diesen Formatierer, um Legacy-Schemata zu standardisieren, bevor Sie Linting oder Breaking Changes hinzufügen; dies macht nachfolgende Diffs viel einfacher zu überprüfen.

Best Practice

Stimmen Sie Ihre Online-Tool-Einstellungen (Einrückungsgröße und Zeilenlänge) mit Ihrer Prettier-Konfiguration im Projekt ab, um lokale und Web-Formatierung identisch zu halten.

Best Practice

Extrahieren Sie lange eingebettete GraphQL-Strings aus dem Code in `.graphql`-Dateien, damit sie einheitlich formatiert und wiederverwendet werden können.

Best Practice

Kombinieren Sie Formatierung mit Linting (z.B. GraphQL ESLint), um Schema- und Abfrageprobleme zu erkennen, die über Leerzeichen und Zeilenumbrüche hinausgehen.