GraphQL-Abfrage-Builder
GraphQL-Operationen von Hand zu schreiben bedeutet, Klammern, Argumente und Einrückung sauber zu halten. Dieser Builder setzt das Dokument für Sie zusammen: Wählen Sie Abfrage, Mutation oder Abonnement, benennen Sie die Operation, legen Sie das Wurzelfeld fest, fügen Sie Argumente hinzu und listen Sie die benötigten Felder auf. Das Ergebnis ist eine formatierte Operation, die Sie direkt in Apollo, urql oder GraphiQL einfügen können.
So erstellen Sie eine GraphQL-Operation
-
1
Operationstyp wählen
Wählen Sie Abfrage, Mutation oder Abonnement aus dem Dropdown. Das bestimmt, welche Art von Operation der Server ausführt.
-
2
Operation benennen
Vergeben Sie einen Namen wie GetUser, damit der Server die Operation protokollieren und cachen kann. Der Name ist optional; der Builder funktioniert auch ohne ihn.
-
3
Wurzelfeld festlegen
Geben Sie das Feld ein, das Sie aufrufen möchten, zum Beispiel user, createPost oder orderUpdated.
-
4
Argumente hinzufügen
Fügen Sie Schlüssel-Wert-Paare wie id: "123" oder id: $id hinzu. Zeilen mit leerem Schlüssel werden übersprungen.
-
5
Felder auflisten und kopieren
Geben Sie ein Feld pro Zeile ein, erstellen Sie die Abfrage und kopieren Sie das formatierte Dokument in die Zwischenablage.
Arbeiten mit GraphQL-Dokumenten
Ein GraphQL-Dokument ist eine Menge aus einer oder mehreren Operationen plus allen Fragmenten, auf die sie verweisen. Jede Operation benennt ein Wurzelfeld vom Typ Query, Mutation oder Subscription, und der Server löst das Auswahlset auf, das Sie anfordern. Der Builder erzeugt den Text der Operation für Sie, kennt aber Ihr Schema nicht. Prüfen Sie deshalb jeden Feld- und Argumentnamen gegen Ihre API, bevor Sie die Operation ausführen.
Anatomie der Operation
| Teil | Zweck | Beispiel |
|---|---|---|
| Operationstyp | Abfrage, Mutation oder Abonnement | query, mutation, subscription |
| Operationsname | Wird für Caching und Protokolle verwendet | GetUserById |
| Argumente | Werte, die an das Wurzelfeld übergeben werden | user(id: "123") |
| Auswahlset | Felder und verschachtelte Auswahlen | { user(id: "123") { name posts { title } } } |
| Variablen | Typisierte Eingaben, die beim Operationsnamen deklariert werden | query GetUser($id: ID!) { user(id: $id) { name } } |
Häufige Fallstricke
- Erforderliche Variablen enden mit
!. Wenn Sie dies bei Argumenten, die im Schema alsNonNullgekennzeichnet sind, vergessen, tritt ein Validierungsfehler auf, bevor der Resolver ausgeführt wird. - Zeichenketten-Argumente brauchen Anführungszeichen. Ein Wert wie
123ist eine Zahl; ein Textwert muss in der Argumentzeile in doppelten Anführungszeichen stehen, etwa"123". - Union- und Schnittstellentypen erfordern Inline-Fragmente
... on TypeName, um typspezifische Felder zu lesen. - Aliasing ist obligatorisch, wenn Sie dasselbe Feld zweimal mit unterschiedlichen Argumenten anfordern, zum Beispiel
today: stats(period: DAY)undweek: stats(period: WEEK). - Verbindungen (Relay-Spezifikation) legen
edges { node { ... } }undpageInfo { endCursor hasNextPage }offen; wenn Sie eines davon weglassen, bricht die Paginierung.
Tipps
- Halten Sie Operationen klein und benannt, damit Apollo Client sie einzeln cachen kann.
- Übergeben Sie wechselnde Werte als Variablen statt als Literale, damit der Server das Dokument einmal analysieren und wiederverwenden kann. Deklarieren Sie sie beim Operationsnamen, zum Beispiel
query GetUser($id: ID!). - Wenn ein Feld mehrere Argumente braucht, schreiben Sie sie in eine Argumentzeile, getrennt durch Kommas, zum Beispiel
filter: { status: ACTIVE }als Wert. - Der Builder gibt genau den Text aus, den Sie eingestellt haben. Schlägt eine Operation fehl, gleichen Sie zuerst Ihre Feldnamen mit dem aktuellen Schema ab.
Häufig gestellte Fragen
Nein. Er formatiert nur den von Ihnen eingegebenen Text; es gibt keinen aufzurufenden Endpunkt und kein benötigtes Schema. Füllen Sie die Operationsteile aus, und der Builder setzt das Dokument für Sie zusammen.
Ja. Über das Dropdown wechseln Sie zwischen Abfrage, Mutation und Abonnement. Alles andere funktioniert genauso: Name, Wurzelfeld, Argumente und Felder.
Fügen Sie im Bereich Argumente Zeilen hinzu. Der Schlüssel ist der Argumentname, der Wert das, was Sie übergeben, zum Beispiel id: “123” oder id: $id. Zeilen mit leerem Schlüssel werden ignoriert. Wenn Sie eine Variable wie $id eingeben, deklarieren Sie sie selbst beim Operationsnamen, zum Beispiel query GetUser($id: ID!).
Der Builder gibt genau den Text aus, den Sie eingegeben haben. Der Fehler bedeutet meist, dass ein Feld- oder Argumentname nicht zu Ihrem Server-Schema passt: Vergleichen Sie das Wurzelfeld und alle Feldnamen mit Ihrer API und korrigieren Sie die Schreibweise.
Verwandte Tools
ASCII-Tabelle Referenz
Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.
HTML-Zeichenreferenz
Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.
Farbrad-Explorer
Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.
Referenz für Tastenkombinationen
Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.
Zufallsbuchstaben-Generator
Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.
Telefonnummern prüfen
Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.
Tool in anderen Sprachen verfügbar
- Construtor de Consultas GraphQL [PT]
- أداة إنشاء استعلامات GraphQL [AR]
- GraphQL 쿼리 빌더 [KO]
- Trình tạo truy vấn GraphQL [VI]
- Pembuat Kueri GraphQL [ID]
- เครื่องสร้าง GraphQL Query [TH]
- Constructeur de requêtes GraphQL [FR]
- Kreator zapytań GraphQL [PL]
- Constructor de Consultas GraphQL [ES]
- GraphQL-querybouwer [NL]
- GraphQLクエリビルダー [JA]
- GraphQL-frågebyggare [SV]
- GraphQL Sorgu Oluşturucu [TR]
- GraphQL查询构建器 [ZH]
- GraphQL Query Builder [EN]
- Costruttore di Query GraphQL [IT]
- Построитель запросов GraphQL [RU]