GraphQL verfügt über allerlei fantastische Werkzeuge. Aber wie bei allem im Web läuft es letztendlich darauf hinaus, dass Daten über das olle Netzwerk gesendet und Antworten zurückkommen. Wenn Sie mit einem GraphQL-Endpunkt sprechen müssen, müssen Sie nicht unbedingt ein Framework oder eine Bibliothek verwenden, um Anfragen zu stellen. Tatsächlich können Sie dies mit reinem JavaScript ziemlich sauber erledigen.
Nehmen wir die Pokémon-API, die es in GraphQL gibt und die ich über diese Liste von APIs gefunden habe. Sie verfügt über eine GraphiQL-Oberfläche zur Erkundung.
Von dieser Seite aus können Sie Abfragen ausführen und die Ergebnisse sehen. Sie können auch den Netzwerk-Tab in DevTools öffnen und die Nutzlast der gesendeten Anfragen sehen, und feststellen, dass es sich nur um ein kleines bisschen JSON handelt, das gesendet wird.
Wir können auch unser eigenes JSON in diesem Format erstellen! Zuerst erstellen wir ein Objekt im richtigen Format und nutzen Template-Literale, um die GraphQL-Abfrage gut aussehen zu lassen (was tatsächlich erforderlich ist, da die Abfragesyntax von Leerzeichen abhängt). Dann wandeln wir es mit der nativen JavaScript-API in JSON um und senden es über die ebenfalls native fetch-API.
Siehe den Pen
Rohe GraphQL-Abfrage von Chris Coyier (@chriscoyier)
auf CodePen.
Kinderleicht. Und kein schickes Werkzeug, um genau das anzufordern, was man braucht, was der Kernvorteil von GraphQL ist.
Es gibt apollo-fetch
Richtig, aber mein Punkt war, dass man keine Bibliothek *braucht*.
Mit GrapphQl in WordPress – https://github.com/wp-graphql/wp-graphql ist ein leistungsfähiges & starkes Werkzeug aus mehreren Gründen
Frustrationen mit REST
1. Implizite Anfragen sind für die langfristige Code-Wartung schwierig.
2. Ständiges Über- oder Unterabfragen (unnötiges Bewegen von riesigen Datenmengen über das Netzwerk).
3. So viele Anfragen erforderlich, um die für die Syndizierung benötigten Daten zu LESEN / SCHREIBEN.
Beachten Sie, dass sich dieses Plugin darauf konzentriert, GraphQL auf einer WordPress-Website verfügbar zu machen, und nicht wirklich darauf, wie der Endpunkt abgefragt wird, sobald er existiert.
Dafür gibt es [super nützliche JS-Bibliothek hier einfügen]!
Entschuldigung, ich konnte nicht widerstehen, nachdem ich die ersten beiden Kommentare gesehen hatte
Das ist eine schöne, überraschende Verwendung von Template-Literalen. Danke für den Tipp!