devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Website-Check

GraphQL Query Builder — Queries visuell erstellen

Füge dein Schema als SDL ein, wähle eine Operation und hake die gewünschten Felder an, auch verschachtelte Objekte und Argumente. Query, Variablen und ein fetch-Snippet werden dir automatisch erzeugt.

Aktualisiert am
Schema (SDL)
Query
Variablen
fetch()

Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

So nutzt du: GraphQL Query Builder

  1. Öffne Schema (SDL) und füge dein Schema ein oder nutze das Beispiel.
  2. Wähle Query, Mutation oder Subscription.
  3. Hake Felder im Baum an. Klappe Objekte auf, um verschachtelte Felder auszuwählen und Argumente auszufüllen.
  4. Kopiere die generierte Query, das Variablen-JSON oder den fertigen fetch()-Aufruf.

So funktioniert der Builder

Das Schema wird mit graphql-js geparst und in einen Baum umgewandelt, der beim Root-Typ der gewählten Operation beginnt. Wenn du ein Feld anhakst, wird es in die Auswahl übernommen. Hakst du ein Objektfeld an, klappt es auf, damit du seine Unterfelder wählen kannst. Ausgefüllte Argumente werden zu Variablen mit den passenden GraphQL-Typen ($id: ID!). So bleibt die Query wiederverwendbar und ist vor Injection geschützt. Das Variablen-JSON wird direkt daneben erzeugt.

Tipps

  • Felder mit Interfaces oder Unions zeigen ihre Implementierungen als Inline-Fragmente (... on Book).
  • Pflichtargumente sind mit ! markiert. Lass optionale Argumente leer, dann werden sie weggelassen.
  • Nutze das Filterfeld, um in großen Schemas schnell ein Feld zu finden.

Eine bestehende Query formatierst oder prüfst du mit dem GraphQL-Formatter & Validator. Die JSON-Antwort kannst du im JSON-Viewer untersuchen.

Auch gesucht als: graphql query generator, graphql query erstellen, graphql abfrage generator, graphql mutation builder, graphql explorer, graphql query online erstellen, graphql playground alternative.

Passende Tools zu: GraphQL Query Builder

  • cURL zu Code — Füge einen curl-Befehl ein, z.
  • OpenAPI-Validator — Füge eine API-Spezifikation ein, um sie gegen das offizielle OpenAPI-Schema zu prüfen, defekte Referenzen und inkonsistente Pfadparameter zu finden und alle Endpunkte auf einen Blick zu sehen.
  • JSON zu Typen — Füge eine API-Antwort ein und erhalte gebrauchsfertige Modelle in 8 Sprachen: TypeScript, Python (dataclass, TypedDict oder Pydantic), Go, Java, C#, Kotlin, Swift und Rust.
  • JSON-Schema-Validator — Füge ein Schema und etwas JSON ein, um genau zu sehen, welche Werte welche Regel verletzen, oder erzeuge ein Startschema aus Beispieldaten.

Häufige Fragen

Wo bekomme ich mein Schema als SDL?
Viele Server stellen es unter /graphql/schema bereit oder es liegt im Repository (schema.graphql). Du kannst es auch mit rover graph introspect oder npx get-graphql-schema https://api.example.com/graphql exportieren.
Wird die Query an meine API gesendet?
Nein. Der Builder erzeugt nur Text in deinem Browser. Kopiere das fetch-Snippet, wenn du die Query selbst ausführen möchtest.
Werden Fragmente unterstützt?
Für Interface- und Union-Felder werden Inline-Fragmente für jeden möglichen Typ erzeugt. Benannte Fragmente kannst du von Hand ergänzen und mit dem GraphQL-Formatter prüfen.
Kann ich GraphQL Query Builder als Web-App installieren und offline nutzen?
Ja. GraphQL Query Builder ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

Ähnliche Tools

localGraphQL Formatter & ValidatorFüge eine Query, Mutation oder ein Schema ein, um es zu formatieren, zu minifizieren oder Fehler zu…localJSON ViewerGroße oder tief verschachtelte JSON-Daten bequem erkunden: Objekte ein- und ausklappen, nach Schlüsseln…localcURL zu CodeFüge einen curl-Befehl ein, z. B. aus der API-Dokumentation oder über „Als cURL kopieren“ in den DevTools…localOpenAPI-ValidatorFüge eine API-Spezifikation ein, um sie gegen das offizielle OpenAPI-Schema zu prüfen, defekte Referenzen…localJSON zu TypenFüge eine API-Antwort ein und erhalte gebrauchsfertige Modelle in 8 Sprachen: TypeScript, Python…localJSON-Schema-ValidatorFüge ein Schema und etwas JSON ein, um genau zu sehen, welche Werte welche Regel verletzen, oder erzeuge…