Invoer

Uitvoer

Wat is de tool GraphQL naar JSON-voorbeeld?

Een GraphQL-API mocken in je testsuite betekent meestal dat je voor elk type met de hand fake data zit te schrijven — saai, broos, en het schema drijft binnen een sprint of twee weg van je fixtures. Deze pagina leest je GraphQL Schema Definition Language en geeft er een passend JSON-document uit. Plak je SDL links en het rechterpaneel geeft je een gevuld JSON-object terug: elk veld van het Query-type ingevuld, lijsten met twee elementen gevuld, enums op hun eerste waarde en custom scalars zoals DateTime of URL gemapt naar zinnige defaults.

Er is geen parser-dependency in de pagina geladen — de SDL-walker is met de hand geschreven, ~600 regels, en dekt alle constructies die in een echt schema voorkomen: type, interface, union, enum, input, scalar, list- en non-null-modifiers en zelfreferentiële types. De uitvoer is gewone JSON volgens RFC 8259, met twee spaties geïndenteerd, klaar om in een fetch-mock of een Postman-voorbeeldrespons te plakken. Velden met namen als email, name, phone, currency of status krijgen passende voorbeeldwaarden; al het andere valt terug op een generieke "sample text".

Alles gebeurt in je browser. Je schema verlaat de pagina nooit, er wordt geen netwerkcall gedaan en de conversie is direct.

Hoe gebruik je de tool GraphQL naar JSON-voorbeeld

Drie snelle stappen. De knoppen die hieronder beschreven worden zijn de echte knoppen op deze pagina.

Plakken, uploaden of een voorbeeld laden

Plak een GraphQL-schema in het linker Invoer-paneel — de conversie is automatisch ongeveer een derde seconde nadat je stopt met typen, dus er is geen Converteer-knop. Klik op Uploaden voor een .graphql- of .gql-bestand of op Voorbeeld om een realistisch e-commerce-Order-schema te laden. Een typische invoer ziet er zo uit:

type Query { order(id: ID!): Order } type Order { id: ID! customer: Customer! items: [OrderItem!]! total: Money! status: OrderStatus! placedAt: DateTime! }

Zowel server-stijl schemas (met type Query { ... }) als losstaande typebestanden werken. De walker pakt Query als root als die er is, anders het eerste objecttype. De geaccepteerde vormen komen overeen met wat tools zoals graphql-js bij opstart parsen.

De JSON-uitvoer lezen

Het rechter Uitvoer-paneel toont het JSON-voorbeeld met twee spaties indentatie. Objecttypes worden objecten. Lijsten worden tweedelige arrays. Enums worden hun eerste waarde als string. Custom scalars krijgen zinnige defaults — DateTime wordt een ISO-8601-timestamp, URL wordt "https://example.com/...", JSON wordt {}. Zelfreferentiële types (type Person { friends: [Person!]! }) worden afgekapt op diepte 4 en eindigen met null, zodat de pagina nooit blijft hangen.

Kopiëren of downloaden

Klik op Kopiëren om de JSON te pakken voor een fixture-bestand, mock server of fetch-stub. Klik op Downloaden om hem als sample.json op te slaan. De clear-knop in het invoerpaneel zet je terug naar een lege staat. De conversie gebeurt volledig client-side — je schema verlaat de pagina nooit.

Wanneer je dit echt zou gebruiken

Mock GraphQL-server fixtures

Je tikt een mock-backend op met json-graphql-server of een Apollo Server-mock en je hebt een start-JSON-bestand nodig dat de vorm van je schema heeft. Plak de SDL, kopieer de uitvoer en je bent voor 80% klaar — namen en ID's aanpassen, fixture verschepen.

Voorbeeldresponses in Postman / Insomnia

Een GraphQL-endpoint documenteren in Postman of Insomnia betekent voor elke operatie een voorbeeld-responsbody invullen. Genereer de JSON-vorm vanuit het type, plak hem in het voorbeeld, pas de waarden aan op de testcase. Beats handmatig geneste objecten vanaf nul tikken.

Frontend-typeschets

Als de backend een nieuw GraphQL-type uitlevert, heeft de frontend vaak een voorbeeld-payload nodig om de UI op te knopen voordat het endpoint echt is. Converteer het schema naar JSON, drop het in een fixture en bouw de componenten tegen de fixture. Switchen naar live data wanneer de API klaar is.

Schema-verkenning

Een SDL van 300 regels lezen kan; zien hoe een echte response eruitziet is sneller. Het JSON-voorbeeld maakt het schema concreet — je ziet meteen welke velden genest zijn, welke arrays zijn en waar de enums leven. Handig als onboarding-hulpmiddel voor engineers die nieuw zijn op een service.

Veelgestelde vragen

Voert het de query uit tegen een echte server?

Nee. De pagina genereert alleen een voorbeelddocument dat past bij de schema-vorm. Er is geen netwerkcall. Als je een echt GraphQL-endpoint moet aanspreken, gebruik dan GraphiQL of een andere GraphQL-client.

Waarom stopt mijn zelfreferentiële type na een paar niveaus?

Er is een recursie-cap op diepte 4. Een schema als type Person { friends: [Person!]! } zou anders een oneindig genest object opleveren. Voorbij de cap wordt de waarde null, zodat de JSON eindig en netjes te printen blijft.

Welk root-type wordt gebruikt?

Eerst wordt naar type Query gezocht. Als die er niet is, pakt hij het eerste objecttype dat in het schema gedefinieerd staat (input-types worden overgeslagen). Je kunt elk type bovenaan zetten door je SDL te herordenen.

Worden custom scalars afgehandeld?

Ja. Veelvoorkomende (DateTime, Date, Time, URL, Email, JSON, BigInt) hebben zinnige defaults ingebouwd. Al het andere valt terug op een generieke placeholder-string. Als jouw scalar naar iets specifieks moet mappen, edit de uitvoer met de hand — het is gewoon JSON.

Is de JSON geldig tegen mijn schema?

Hij is vorm-geldig: elk verplicht veld is gevuld, types kloppen met hun gedeclareerde scalar/object/list, enums gebruiken een echte enum-waarde. Hij is niet semantisch geldig (de email is geen echte email, de order-ID geen echte ID). Gebruik als startpunt voor een fixture, niet als vervanger voor tests.

Wordt mijn schema naar een server gestuurd?

Nee. De conversie draait volledig in je browser. Niets wordt geüpload, niets wordt gelogd. Veilig om interne of niet-uitgebrachte schemas te plakken.

Andere GraphQL- en JSON-tools

Een voorbeeld genereren is maar een deel van de GraphQL-workflow. Deze tools dekken de rest: