Abfrage/Mutations-Editor
In diesem Kapitel wird die Struktur des Abfrage/Mutations-Editors im Dialogfeld GraphQL-Einstellungen beschrieben. Außerdem enthält es eine Anleitung zum Arbeiten mit dem Editor.
Informationen über grundlegende Konzepte im Zusammenhang mit GraphQL-Abfragen und -Mutationen finden Sie auf den folgenden Seiten:
Informationen zu Beispielabfragen und -mutationen finden Sie unter Beispiele.
Struktur des Editors
In der Abbildung unten sehen Sie den Abfrage/Mutations-Editor des Dialogfelds GraphQL-Einstellungen.
Der Editor ist in folgende Bereiche gegliedert:
•Auf der linken Seite wird die Abfrage oder Mutation erstellt.
•Auf der rechten Seite sehen Sie das Explorer-Fenster, das drei Informationsblöcke enthält: Datenelemente, die im Schema für die aktuelle Zelle zur Verfügung stehen, den Datentyp und die Beschreibung des ausgewählten Datenelements.
Die Felder im Explorer-Fenster haben Zahlen, die innerhalb von Klammern und geschweiften Klammern stehen, z.B. products (8) {3}. Die Zahl in Klammern (z.B. (8)) gibt die Anzahl der Argumente an, die für das Feld zulässig sind. Die Zahl in den geschweiften Klammern (z.B. {3}) gibt an, wie viele untergeordnete Felder für dieses Feld vorhanden sind.
Grundlegende Konzepte und Aspekte
•Eine Zelle ist ein Container für einen einzelnen Namen, Wert oder eine einzelne Schaltfläche, ähnlich einer Zelle in einem Arbeitsblatt.
•Ein Struktur-Node hat eine Hauptzelle, eventuell zusätzliche Datenzellen und optional Child-Nodes. Jede Instanz von Feldern, Argumenten, usw. wird durch einen eigenen Struktur-Node dargestellt.
•Die Hauptzelle ist normalerweise der Name des aktuellen Node. Es gibt jedoch zwei Ausnahmen: Für die Operation ist die Hauptzelle der Operationstyp; für Fragmente ist die Hauptzelle das Schlüsselwort fragment.
•Ähnlich wie bei einer Tabellenkalkulationsapplikation gibt es einen Navigationsmodus und einen Zellenbearbeitungsmodus.
•Die Zelle, die aktuell im Fokus ist gibt die aktuelle Position in der Struktur an.
•Die Zeile im Fokus ist die Zeile, die die im Fokus befindliche Zelle enthält.
•Wenn etwas hinzugefügt werden kann, wird in der fokussierten Zeile oder bei Platzieren der Maus darüber eine Hinzufügen-Schaltfläche (+) angezeigt. Folgende Einträge können hinzugefügt werden:
o(+) fügt an der Stelle der Hinzufügen-Schaltfläche ein Datenelement der entsprechenden Art hinzu. Wenn die Hinzufügen-Schaltfläche rot ist, ist an dieser Stelle mindestens ein Datenelement unbedingt erforderlich. Nachdem Sie auf eine Hinzufügen-Schaltfläche geklickt haben, wird ein Platzhalter-Node zum Ausfüllen der Zellen angezeigt. Wenn Sie nichts eingeben, verschwindet der Platzhalter-Node, wenn Sie die Maus an eine andere Stelle bewegen.
o(,,,) fügt ein Argument hinzu.
o($) fügt eine Variablendefinition zur Operation hinzu.
o(=) fügt einen Standardwert zur Variablendefinition hinzu.
o(@) fügt eine Direktive hinzu.
o(:) fügt ein Alias zu einem Feld hinzu.
o(+ fragment) fügt ein Fragment hinzu.
•Fehlermeldungen werden direkt unterhalb der Struktur-Nodes angezeigt, in denen Fehler gefunden wurden.
Wechseln zwischen einer Abfrage und einer Mutation
Sie können im Editor nur eine einzige GraphQL-Operation (eine Abfrage oder Mutation) und null oder mehr Fragmente definieren. Um zwischen einer Abfrage und einer Mutation zu wechseln, stellen Sie sicher, dass sich die oberste Zelle im Fokus befindet und wählen Sie anschließend eine der folgenden Methoden:
•Drücken Sie die Eingabetaste, um die Dropdown-Liste zu öffnen und wählen Sie den gewünschten Operationstyp aus.
•Klicken Sie auf die oberste Zelle, um die Dropdown-Liste zu öffnen und wählen Sie den gewünschten Operationstyp aus.
•Drücken Sie q, um eine Abfrage (query) auszuwählen oder m, um eine Mutation auszuwählen.
Tastaturkürzel und Mausfunktionen
Sie können mit Hilfe der Maus oder der Tastatur im Editor navigieren. Nähere Informationen dazu finden Sie weiter unten.
Navigationsmodus
•Mit den Cursor-Tasten Tab, Umschalt+Tab, Bildauf, Bildab, können Sie navigieren.
•Um eine Hinzufügen-Schaltfläche im Fokus zu aktivieren, drücken Sie die Eingabetaste.
•Um in den Zellenbearbeitungsmodus zu wechseln, drücken Sie die Eingabetaste, F2 oder beginnen Sie mit der Eingabe.
•Wenn es sich bei der Zelle im Fokus um die Hauptzelle oder einen Struktur-Node handelt, gilt der gesamte Struktur-Node als ausgewählt. Dies wird durch eine farbige Leiste am linken Rand angezeigt.
•Mit Strg+X bzw. Strg+C können Sie die aktuelle Auswahl (den gesamten Struktur-Node oder die aktuelle Zelle) ausschneiden bzw. im Textformat in die Zwischenablage kopieren.
•Mit Entf können Sie die aktuelle Auswahl (den gesamten Struktur-Node oder die aktuelle Zelle) löschen.
•Mit Strg+V können Sie den Inhalt der Zwischenablage an der aktuellen Stelle einfügen. Dies funktioniert nur, wenn die Zwischenablage Text enthält, der an der aktuellen Stelle gültig ist; andernfalls wird eine Fehlermeldung angezeigt.
•Mit Strg+Z können Sie die letzte Aktion rückgängig machen.
•Mit Strg+Y können Sie die letzte Rückgängig-Aktion rückgängig machen.
•"$" fügt zum Operationstyp oder -namen eine Variablendefinition hinzu.
•"," fügt in der Namenszelle einer Auswahl, in Variablendefinitionen, Argumenten oder Direktiven nach dem aktuellen Feld ein gleichrangiges Element ein.
•In der Namenszelle eines Felds:
ofügt "(" ein Argument hinzu,
o"@" eine Direktive,
o"{" eine Child-Auswahl.
•Mit Esc können Sie das Dialogfeld schließen, ohne Ihre Änderungen zu speichern (Sie werden gefragt, ob Sie Ihre Änderungen verwerfen möchten) - diese Aktion hat dieselbe Wirkung wie ein Klick auf Abbrechen.
•Mit Strg+Eingabetaste können Sie das Dialogfeld schließen und Ihre Änderungen speichern (hat dieselbe Wirkung wie Klick auf OK).
•Mit Strg+Tab oder Strg+Umschalt+Tab können Sie den Tastaturfokus aus dem GraphQL-Editor hinaus verschieben.
Zellenbearbeitungsmodus
•Sie können Werte in Eingabefelder eingeben und diese bearbeiten.
•Im Explorer-Fenster werden verfügbare Einträge, die mit dem eingegebenen Text beginnen, angezeigt.
•Mit Hilfe der Pfeil auf- und Pfeil ab-Tasten und Bildauf und Bildab können Sie einen Eintrag aus dem Explorer-Fenster auswählen. Alternativ können Sie diesen auch mit der Maus auswählen.
•Durch Drücken der Eingabetaste übernehmen Sie den bearbeiteten Text.
•Mit Esc verwerfen Sie den bearbeiteten Text.
•Mit Tab übernehmen Sie Ihre Eingabe und springen zur nächsten Zelle. Mit (Umschalt+Tab gelangen Sie zur vorherigen Zelle).
•Geben Sie "...myfragmentname" ein, um ein Fragment Spread zu erstellen.
•Geben Sie "...on mytype" ein, um ein Inline-Fragment zu erstellen.
•Geben Sie "...", um ein Inline-Fragment ohne eine Typ-Bedingung zu erstellen.
•Nur in einer neu eingefügten Auswahl, Variablendefinition oder einem neu eingefügten Argument können Sie nicht nur den Namen, sondern einen vollständigen GraphQL-Ausdruck eingeben, der an dieser Stelle gültig ist und durch Drücken der Eingabetaste eingefügt wird. Wenn Sie z.B. "myalias:myfield(arg:10)" eingeben, werden ein Feld mit einem Alias und ein Argument mit einem Wert erstellt.
Mausfunktionen
•Klicken Sie in eine Zelle, um sie zu aktivieren.
•Klicken Sie auf eine Hinzufügen-Schaltfläche, um sie zu aktivieren.
•Doppelklicken Sie in eine Zelle, um den Bearbeitungsmodus aufzurufen.
•Klicken Sie in das Explorer-Fenster, um eine Auswahl festzulegen.
•Doppelklicken Sie in das Explorer-Fenster, um eine Auswahl anzuwenden.
Im GIF angezeigte Beispielabfragedefinition
In der Demo unten wird gezeigt, wie Sie im Editor des Dialogfelds GraphQL Settings eine Abfrage erstellen.
