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. 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. 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. 3

    Wurzelfeld festlegen

    Geben Sie das Feld ein, das Sie aufrufen möchten, zum Beispiel user, createPost oder orderUpdated.

  4. 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. 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 als NonNull gekennzeichnet sind, vergessen, tritt ein Validierungsfehler auf, bevor der Resolver ausgeführt wird.
  • Zeichenketten-Argumente brauchen Anführungszeichen. Ein Wert wie 123 ist 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) und week: stats(period: WEEK).
  • Verbindungen (Relay-Spezifikation) legen edges { node { ... } } und pageInfo { 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

Tool in anderen Sprachen verfügbar