Eingabe

Ausgabe

Was ist der GraphQL-Viewer?

Wenn du schon mal ein Stück GraphQL SDL eingefügt hast, das in einer einzigen Zeile zurückkam, und versucht hast, das zu lesen, kennst du das Problem. Typen, Felder, Argumente, Direktiven und Union-Mitglieder kollabieren alle ineinander und die Struktur ist weg. Dieses Tool fixt das. Schema links einfügen, und das rechte Panel rendert es mit Zwei-Leerzeichen-Einrückung, einem Feld pro Zeile, Argumenten inline und Block-String-Beschreibungen über dem Typ oder Feld, das sie dokumentieren.

Der Pretty-Printer ist handgeschrieben — kein graphql-npm-Paket wird in die Seite geladen, also bleibt das First Paint klein. Er tokenisiert das SDL, läuft die Klammerstruktur durch und gibt es mit konsistenten Abständen gemäß der GraphQL-Spec von Oktober 2021 wieder aus. Er kann jede SDL-Konstruktion, die einem in der Praxis begegnet: type, interface, union, enum, input, scalar, extend, schema, List- und Non-Null-Modifier ([Foo!]!), Default-Werte, Direktiven und Beschreibungen mit dreifachen Anführungszeichen. Schon sauberes SDL kommt unverändert zurück.

Alles läuft im Browser. Kein Upload, kein Schema irgendwo gespeichert. Einfügen, lesen, kopieren.

So benutzt du den GraphQL-Viewer

Drei schnelle Schritte. Die unten beschriebenen Buttons sind die echten Buttons auf dieser Seite.

Einfügen, hochladen oder Beispiel laden

GraphQL-Schema in das linke Eingabe-Panel einfügen. Auf Hochladen klicken für eine .graphql-, .graphqls- oder .gql-Datei, oder Beispiel drücken, um ein realistisches E-Commerce-Schema zu laden. Schnelles Beispiel, wie minifiziertes SDL aussieht:

type Order{id:ID! placedAt:DateTime! customer:Customer! items:[OrderItem!]! total:Money! status:OrderStatus!} type OrderItem{sku:String! name:String! quantity:Int! unitPrice:Money!}

Sowohl Server-Style-Schemas (mit extend type Query) als auch alleinstehende Type-Definitionen funktionieren. Die akzeptierten Formen entsprechen dem, was Tools wie Apollo Server parsen.

Formatierte Ausgabe lesen

Das rechte Ausgabe-Panel rendert das geparste SDL mit Zwei-Leerzeichen-Einrückung. Jedes Feld, jeder Enum-Wert und jedes Union-Mitglied bekommt seine eigene Zeile. Argumente bleiben inline auf der Feld-Zeile, damit sich Signaturen natürlich lesen. Beschreibungen, die als Block-Strings ("""...""") geschrieben sind, bleiben über dem Typ oder Feld, das sie beschreiben — so empfiehlt es die Relay-GraphQL-Spezifikation, ein Schema zu dokumentieren. Wenn das SDL unausgewogene Klammern oder andere Parse-Fehler hat, zeigt der Viewer eine freundliche Meldung statt zu crashen.

Kopieren oder herunterladen

Kopieren drücken, um das formatierte Schema für einen Pull Request, Doc oder Chat mitzunehmen. Download drücken, um es als .graphql zu speichern. Der Clear-Button im Eingabe-Panel setzt dich auf einen leeren Zustand zurück. Das Parsing passiert komplett clientseitig — dein Schema verlässt die Seite nie.

Wann du das wirklich benutzt

Schema-Pull-Request-Reviews

Reviewst gerade einen Schema-PR und das Diff ist schwer zu lesen, weil die Datei durch einen Codegenerator lief, der die Formatierung gekillt hat? Neue Version hier einfügen, Struktur überfliegen, dann mit einem klareren mentalen Modell der Änderungen zurück zum Diff. Besonders nützlich, wenn das Team gerade darüber iteriert, was als gutes Schema-Design zählt.

Federation- und Subgraph-Debugging

Debuggst einen Apollo-Federation-Gateway und das zusammengesetzte Supergraph-Schema kommt als ein riesiger Klumpen zurück? Gemergetes SDL einfügen, den Typ finden, der sich falsch verhält, sehen, welcher Subgraph welches Feld beigesteuert hat. Die Federation-Direktiven, die in der Ausgabe auftauchen, sind neben dem Rest der Schema-Syntax dokumentiert.

Eine API dokumentieren

Schreibst öffentliche Doku für eine GraphQL-API, die dein Team betreibt? Schema in den Viewer fallen lassen, formatierte Version ins Wiki oder README kopieren. Die Baumstruktur aus Typen, Interfaces und Unions liest sich natürlich, sobald sie mit einem Feld pro Zeile dasteht.

Onboarding neuer Entwickler

Ein neues Teammitglied versucht, die Form deiner GraphQL-API zu lernen. Ein formatiertes Schema mit Beschreibungen sichtbar über jedem Typ ist ein deutlich freundlicherer Startpunkt als der unformatierte Klumpen aus dem Codegen-Output.

Häufige Fragen

Validiert es mein Schema oder formatiert es nur?

Nur formatieren. Der Viewer prüft Klammer- und Anführungszeichen-Balance gut genug zum Pretty-Printen, verifiziert aber nicht, ob Query existiert, ob referenzierte Typen definiert sind oder ob Direktiven-Argumente zur Definition passen. Für volle Validierung nimmst du die Referenzimplementierung graphql-js oder schickst es durch die Startup-Checks deines Servers.

Wird mein Schema an einen Server geschickt?

Nein. Der Pretty-Printer läuft komplett im Browser. Nichts wird hochgeladen, nichts wird geloggt. Sicher, interne oder unveröffentlichte Schemas einzufügen.

Behandelt es Block-String-Beschreibungen?

Ja. Beschreibungen mit dreifachen Anführungszeichen ("""Eine vom Kunden aufgegebene Bestellung.""") bleiben erhalten und werden auf der Zeile über dem Typ oder Feld ausgegeben, das sie dokumentieren. Das ist die kanonische Art, SDL-Doku gemäß der GraphQL-Spec zu schreiben.

Was ist mit Direktiven und Custom-Scalars?

Beides bleibt erhalten. @deprecated, @key und jede Custom-Direktive bleiben inline am Feld. Custom-Scalars wie scalar DateTime kommen auf eine eigene Zeile. Der Viewer versucht nicht, die Direktiven-Semantik zu interpretieren — das ist Sache deines Servers.

Wird bereits formatiertes SDL nochmal formatiert?

Es ist idempotent — bereits sauberes SDL formatiert ergibt dieselbe Ausgabe. Du kannst den Viewer also in einem CI-Check oder einem Paste-and-Compare-Workflow laufen lassen, ohne dir Sorgen über Whitespace-Drift zu machen.

Wie groß darf ein Schema sein, das ich einfüge?

Alles, was dein Browser bequem rendert. Schemas mit ein paar hundert Typen sind kein Problem. Ab 5 MB fängt der Ace-Editor selbst an zu schwächeln — das ist der Flaschenhals, nicht der Parser.

Weitere GraphQL-Tools

Anschauen ist nur ein Teil der Arbeit mit GraphQL. Diese Tools übernehmen den Rest: