Erste Schritte mit der GraphQL-Syntax

Wir geben in diesem Artikel eine Anleitung mit Ersten Schritten zur Nutzung von GraphQL

Query, mutation, delete

Eine GraphQL-Abfrage leiten Sie mit den Schlüsselwörtern query, mutation oder delete ein.

  • query entspricht GET,
  • mutation einem POST oder PUT
  • delete entspricht DELETE

In diesen Beispielen fokussieren wir uns auf den Typ query, das heißt wir lesen nur Daten.

Name und Art der Abfrage

Auf das Schlüsselwort "query" folgt ein selbstgewählter Name, der mit einem Buchstaben beginnen muss. Der Name der Query hat zunächst keine Relevanz.

Nach dem Namen der Query, folgen geschweifte Klammern und dann die Bezeichnung der Query, wie sie von ProMaterial definiert wurde. Im Beispiel verwenden wir die "productsearch".

query q1 { productsearch }

Filterkriterien

Nach productsearch verwenden wir runde Klammern, innerhalb derer wir Filterkriterien verwenden. Runde Klammern werden in GraphQL immer dann verwendet, wenn Sie zurückgebene Ergebnisse einschränken wollen. Wir filtern Produkte nach einem Suchbegriff, hier "gkfi". Noch ist die Query nicht vollständig.

query q1 { productsearch(query:"gkfi") }

Ergebnis

In GraphQL können Sie genau die Informationen anfordern, die Sie brauchen. Je nach Anwendungsfall können Sie hierarchische Datenstrukturen abfragen und innerhalb eines Ergebnisses weiter filtern.

Nach den Filterbedingungen in runden Klammern, folgen geschweifte Klammern. Folgende Optionen haben Sie meist:

  • content: Das eigentliche Ergebnis
  • pageInfo: Infos über Gesamtanzahl der Ergebnisse (für Pagination)
  • facets: Aggregierung der Ergebnisse nach bestimmten Kriterien (für Filter im Frontend bspw)

Wir verwenden "content" und arbeiten uns bis zur descriptionShort des Produkts hinab.

query q1 {
productsearch(query: "gkfi") {
    content {
      productDetails {
        descriptions {
          descriptionShort
        }
      }
    }
  }
}

Die Query ist jetzt korrekt und kann über "Prettify" formatiert werden, wie im Beispiel schon geschehen.