Loading…

Over Online GraphQL Formatter

Houd je GraphQL SDL en operaties leesbaar en consistent. Deze online GraphQL formatter gebruikt Prettier's GraphQL-parser om je documenten opnieuw in te springen, te wrappen en te normaliseren. Het draait in de browser waar mogelijk en valt terug op een serverformatter indien nodig, zodat je betrouwbare output krijgt zonder na te denken over de tooling.

Wat Deze GraphQL Formatter Doet

  • Gebruikt Prettier's GraphQL-parser om consistente, gemeenschapsstandaard opmaak toe te passen
  • Ondersteunt queries, mutaties, subscriptions, fragmenten en volledige schema SDL (types, interfaces, unions, enums, inputs, directives)
  • Aanpasbare inspringing: kies spaties of tabs en configureer inspringgrootte (1–8)
  • Optionele regelbreedte / wrappingcontrole via een configureerbare kolombreedte
  • Houdt beschrijvingen (`"""…"""`) en inline commentaren intact terwijl hun lay-out wordt genormaliseerd
  • Valideert je GraphQL-documentstructuur als onderdeel van de opmaak; ongeldige syntax toont fouten in plaats van code stil te beschadigen
  • Hybride uitvoering: draait Prettier in de browser wanneer beschikbaar en valt terug op een serverformatter indien nodig
  • Plak of upload `.graphql` / `.gql` bestanden, bekijk, kopieer of download het opgemaakte resultaat

📝 Hoe GraphQL Online te Formatteren for graphql-formatter

1

Plak of Upload Je GraphQL

Plak je GraphQL-schema of queries in de editor, of sleep een `.graphql` / `.gql` bestand. De formatter werkt voor zowel SDL- als operatiedocumenten.

2

Pas Opmaakopties Aan

Kies spaties of tabs, stel de inspringgrootte in en configureer je voorkeursregellengte. Deze opties worden doorgegeven aan Prettier's GraphQL-formatter.

3

Formatteer, Bekijk & Exporteer

Klik op Formatteren om de wijzigingen toe te passen. Bekijk het resultaat in het voorbeeldvenster en kopieer het vervolgens terug naar je editor of download het geformatteerde bestand.

Technische Specificaties

Ondersteunde Invoer

Ontworpen voor standaard GraphQL-schema- en operatiedocumenten.

TypeVoorbeeldenOpmerkingen
Schema SDLschema.graphql, schema.gqlTypen, interfaces, unions, enums, inputs, richtlijnen, schemadefinitie
Operatiesqueries.graphql, app.gqlQueries, mutaties, abonnementen en fragmenten
Extensiesschema-extensies in aparte bestandenbijv. `extend type Query { … }` blokken

Opmaakengine

Opmaak wordt uitgevoerd met Prettier's GraphQL-ondersteuning. In de meeste gevallen draait Prettier in de browser via een lichtgewicht runtime. Als de GraphQL-plug-in niet kan worden opgelost in de huidige omgeving, valt de formatter naadloos terug op een server-side Prettier-worker.

Beschikbare Opties (Gekoppeld aan Prettier)

OptieGedragTypische Waarden
InspringstijlKies tussen spaties en tabsspatie (standaard) of tab
InspringgrootteAantal spaties per inspringniveau (bij gebruik van spaties)1–8, standaard: 2
RegellengteDoelkolom voor het ombreken van lange selecties0–120 (0 ≈ effectief geen ombreking)

Limieten & Prestaties

Het gereedschap is afgestemd op typische GraphQL-schema's en operationele bestanden. Verzoeken van enkele honderden KB tot ~2 MB zijn over het algemeen veilig; extreem grote documenten kunnen timeouts of groottebeperkingen tegenkomen.

Privacy & Veiligheid

GraphQL-documenten worden geformatteerd in uw browser of op encode64's formatter-backend. Ze worden niet uitgevoerd of naar externe diensten gestuurd. Voor gevoelige schema's kunt u dezelfde configuratie lokaal nabootsen met Prettier.

Commandoregel Equivalent (Prettier)

Als u Node.js en Prettier al geïnstalleerd heeft, kunt u dit gedrag lokaal reproduceren.

Node.js (alle platformen)

Formatteer een GraphQL-schemabestand ter plaatse

npx prettier --write schema.graphql

Prettier detecteert automatisch GraphQL op basis van de bestandsextensie.

Formatteer met aangepaste inspringing en regelbreedte

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

Weerspiegelt de inspring- en afbreekopties die beschikbaar zijn in de online tool.

Formatteer vanuit stdin (bijvoorbeeld doorgeleid vanuit een ander gereedschap)

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

Handig in shell-scripts, CI-pijplijnen of Git-hooks.

Veelvoorkomende GraphQL Formatter Gebruiksscenario's

API Schema Ontwikkeling

  • Houd grote schemabestanden consistent geformatteerd voor eenvoudigere navigatie
  • Verminder ruis door witruimteverschillen in schema-PR's
  • Bereid schone SDL voor op codegeneratietools
# Voor
type User{ id:ID! name:String!}

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

Frontend Operaties & Fragmenten

  • Normaliseer gedeelde queries over meerdere apps of pakketten
  • Maak geneste selecties makkelijker te scannen tijdens debuggen
  • Houd documentatiefragmenten en playground-voorbeelden netjes geformatteerd

Tests, Fixtures & Tooling

  • Standaardiseer GraphQL-fixtures gebruikt in snapshot-tests
  • Integreer formattering in pre-commit hooks of CI-taken
  • Voer schone documenten in voor schemavalidatie of diff-tools

❓ Frequently Asked Questions

Wat verandert de GraphQL-formatter daadwerkelijk?

Het herstructureert uw GraphQL-documenten volgens Prettier's GraphQL-regels: inspringing, regelafbrekingen, spaties rond interpunctie en de lay-out van selecties en velden. Het hernoemt geen velden, voegt geen argumenten toe of verandert schemasemantiek.

Ondersteunt het zowel operaties als schema-SDL?

Ja. De formatter werkt voor standaard GraphQL-operaties (queries, mutaties, subscriptions, fragmenten) en schema-definitietaal (typen, interfaces, enums, unions, inputs, directives, schemadefinities en extensies).

Worden opmerkingen en beschrijvingsstrings behouden?

Ja. Drievoudig geciteerde beschrijvingsstrings (`"""…"""`) en inline `#`-opmerkingen worden behouden. De formatter kan ze herschikken of omliggende witruimte aanpassen, maar verwijdert ze niet opzettelijk.

Wordt mijn GraphQL-code uitgevoerd?

Nee. De tool parseert uw GraphQL als tekst om deze opnieuw te formatteren, maar voert geen queries uit of maakt verbinding met een GraphQL-server.

Waar wordt de opmaak uitgevoerd: client of server?

De formatter geeft er de voorkeur aan Prettier direct in uw browser uit te voeren voor responsiviteit. Als de vereiste GraphQL-plugin daar niet kan worden geladen, valt deze terug op een Prettier-worker op de server met dezelfde opties.

Is dit gratis te gebruiken?

Ja. De tool is gratis met fair-use bescherming om de prestaties stabiel te houden. Voor zware of privé workloads, spiegel dezelfde configuratie met Prettier in uw eigen omgeving.

Pro Tips

Best Practice

Gebruik deze formatter om verouderde schema's te standaardiseren voordat u linting of breaking changes toevoegt; het maakt latere verschillen veel gemakkelijker te beoordelen.

Best Practice

Stel uw online toolinstellingen (inspringgrootte en regelbreedte) af op uw project's Prettier-configuratie om lokale en webopmaak identiek te houden.

Best Practice

Haal lange ingebedde GraphQL-strings uit code in `.graphql`-bestanden, zodat ze uniform kunnen worden geformatteerd en hergebruikt.

Best Practice

Combineer opmaak met linting (bijv. GraphQL ESLint) om schema- en queryproblemen op te sporen die verder gaan dan spaties en regelomloop.

Additional Resources

GraphQL-specificatie
Documentation
Prettier – GraphQL-opmaak
Documentation
GraphQL Officiële Documentatie – Leren
Documentation
GraphQL ESLint (Lint-regels)
Documentation

Other Tools