Invoer

Uitvoer

Wat is de GraphQL Query Formatter?

Elke GraphQL-request die iemand met de hand schrijft begint als een muur van krullen op één regel. Hem zonder formatteren in een code review plakken is dé manier om "even reformatteren graag" als eerste comment te krijgen. Hetzelfde geldt voor de queries die uit een frontend-build rollen, door een server worden gelogd, of in een Slack-thread belanden als een teamgenoot vraagt "waarom geeft dit null terug?". Deze pagina pakt een query, mutation, subscription of fragment en maakt hem mooi: twee spaties inspringen, één veld per regel, argumenten inline als ze passen, variables netjes, en de operations-grammatica uit de GraphQL-spec wordt van begin tot eind gerespecteerd.

Let op: deze pagina is de operations-tegenhanger van GraphQL Formatter. Die tool formatteert schema definition language — je type Order, interface Node, enum Status. Deze tool formatteert wat je client verstuurt en wat je server ontvangt: query OrderDetails($id: ID!) { order(id: $id) { ... } }, mutations, subscriptions en fragment-definities. De twee grammatica's delen tokens, maar de structurele regels zijn anders — selection sets, aliases, fragment spreads, inline fragments en directive-toepassingen zijn alleen voor operations. Heb je per ongeluk SDL geplakt, ga dan naar de schema-formatter.

De formattering is met de hand in TypeScript geschreven — er wordt geen graphql-js-bundle in de pagina geladen, dus de eerste paint blijft klein. De uitvoer komt voor de gangbare gevallen overeen met wat Prettier met de GraphQL-plugin produceert, dus de geformatteerde query in een codebase plakken die al Prettier gebruikt zou geen diff moeten opleveren. Alles draait lokaal — je query verlaat je browser nooit.

Zo Gebruik Je de GraphQL Query Formatter

Drie stappen. Er is geen Convert-knop — formatteren start automatisch een moment nadat je stopt met typen.

Plakken, Uploaden of Voorbeeld Laden

Plak een GraphQL-operation in het linker Invoer-paneel. Klik op Uploaden voor een .graphql- of .gql-bestand, of op Voorbeeld voor een realistische e-commerce OrderDetails-query plus een klein fragment. Een typische rommelige paste ziet er zo uit:

query OrderDetails($id:ID!,$includeItems:Boolean=true){order(id:$id){id placedAt status customer{id name email}items @include(if:$includeItems){sku quantity unitPrice{amountCents currency}}total{amountCents currency}}}

De formatter handelt elk operation-construct af dat in echte client-code voorkomt: variable-definities met defaultwaarden, list-defaults, @include- / @skip- / custom-directives, aliases, fragment spreads (...Money) en inline fragments (... on PaidOrder { ... }). Meerdere operations of fragments in één document blijven gescheiden, met een lege regel ertussen — zo verwachten Apollo Client en de meeste GraphQL-tools dat documenten zijn ingedeeld.

Lees de Mooi Gemaakte Uitvoer

Het rechter Uitvoer-paneel toont de geformatteerde operation. Elk veld krijgt zijn eigen regel. Argumenten blijven inline als het veld in 80 tekens past, en breken naar aparte regels als dat niet zo is — dezelfde regel als de GraphQL-plugin van Prettier. Variable-definities volgen dezelfde regel in de operation-header. Aliases houden één spatie na de dubbele punt (aliasedAs: fieldName). Comments (# ...) blijven op de inspringing van de regel waar ze aan vast zaten. Als de invoer kapot is — niet-passende krullen, een losse $, een ontbrekende : — schrijft de formatter een vriendelijke inline-fout in plaats van te crashen.

Kopiëren of Downloaden

Druk op Kopiëren om de geformatteerde query mee te nemen naar een PR, doc of chatbericht. Druk op Downloaden om als query.graphql op te slaan. Clear reset de invoer. De hele pijplijn is client-side — handig als je een query tegen een interne API debugt en hem liever niet in een tool van derden plakt.

Wanneer Je Dit Echt Gebruikt

Code Review en PR-Hygiëne

Een frontend-PR voegt een nieuwe mutation toe. De query-string is uitgespuugd door een build-stap die alle whitespace heeft gestript, en nu is de diff een muur van 400 tekens. Haal de mutation door de formatter, plak de mooi gemaakte versie in de PR-omschrijving, en de reviewer kan eindelijk zien welke velden je leest. Hetzelfde trucje werkt voor graphql-react, urql, Relay en elke andere client waar queries als template literals inline staan.

Een Productiequery Debuggen

Een query in productie geeft null terug voor een veld waar je iets verwachtte. Je pakt de request-body uit het network-tabblad, plakt hem hier, en je ziet meteen de variable-waarden, welke velden @include gebruiken en waar de fragment spreads landen. Beats turen op één lange regel. Combineer het met de officiële guide voor GraphQL via HTTP serveren als je de request handmatig met curl of Postman moet reproduceren.

Leren en Onboarding

Nieuw met GraphQL-operations? Plak een query die je in een tutorial vond, formatteer hem, en de structuur wordt ineens duidelijk — operation-header, selection set, geneste selection sets, fragment-definities onderaan. De uitvoer spiegelt de layout die je in de queries-guide van graphql.org ziet, dus tijdens het leren makkelijk terugmappen naar de docs.

Pre-commit en CI Gates

Omdat de formatter deterministisch is — al mooi gemaakte queries komen ongewijzigd terug — kun je deze pagina als snelle "is mijn query al netjes?"-check vóór een commit gebruiken. Voor een volledig geautomatiseerde pijplijn haal je dezelfde bron door Prettier met de GraphQL-plugin en laat je de build falen op een niet-lege diff. Zelfde idee, alleen op schaal.

Veelgestelde Vragen

Wat is het verschil met de GraphQL Formatter-pagina?

De GraphQL Formatter-pagina formatteert schema definition language — je type-, interface-, enum-, union-, scalar- en directive-declaraties. Deze pagina formatteert operations: query, mutation, subscription en fragment. De twee grammatica's delen tokens, maar hebben heel andere structurele regels, dus een operation op de schema-pagina willen formatteren (of andersom) levert troebele uitvoer op. Kies de juiste tool voor wat je hebt geplakt.

Valideert hij mijn query tegen een schema?

Nee. De formatter controleert de balans van krullen, ronde en vierkante haken net genoeg om te kunnen pretty-printen, maar hij kent jouw schema niet, dus hij kan niet zeggen dat order id: ID! verwacht in plaats van id: Int!. Voor echte validatie haal je je operation door de startup-checks van je server of door de referentie-graphql-js-validator via de GitHub-link hierboven.

Wordt mijn query naar een server gestuurd?

Nee. Het formatteren is pure client-side JavaScript — niets wordt geüpload, niets gelogd. Veilig voor interne queries, queries met gevoelige variable-waarden of queries tegen privé-API's.

Komt hij aan mijn variable-waarden of argumenten?

Nee. Argument-waarden, defaultwaarden en list-defaults worden precies uitgevoerd zoals geschreven, alleen met consistente spatiëring rond :, = en ,. De formatter verzint, dropt of herschikt nooit velden, argumenten of variables — wat je plakt komt eruit, alleen netjes opgemaakt.

Kan hij overweg met inline fragments en fragment spreads?

Ja. Inline fragments (... on PaidOrder { ... }) krijgen de standaard selection-set-behandeling met twee spaties inspringen. Fragment spreads (...Money) staan op één regel op veld-inspringing, met directives op dezelfde regel. Meerdere fragment-definities in één document blijven aparte top-level definities met een lege regel ertussen.

En anonieme queries — <code>{ field }</code> — expandeert hij die naar <code>query { field }</code>?

Nee. De korte vorm is onderdeel van de spec en de formatter laat hem zoals hij is. Wil je een named query, geef hem zelf een naam — de formatter herschrijft operations niet stilletjes.

Andere GraphQL-tools

Een query-formatter is maar een stukje van het werk met GraphQL. De andere GraphQL-tools op de site: