© Spirit Boom Cat/Shutterstock.com
GraphQL-Frontends mit React und Angular entwickeln

GraphQL im Client mit Apollo


GraphQL, die von Facebook entwickelte Abfragesprache für Web-APIs, gewinnt seit einigen Jahren an Aufmerksamkeit. Auch hier im Java Magazin erschienen bereits Artikel zum Thema, so zum Beispiel in den Ausgaben 5.18 und 7.18. Dabei wurde aber vor allem die Serverseite näher betrachtet, der Client hingegen ausgespart. Aus diesem Grund soll es heute um die Nutzung einer GraphQL-Schnittstelle im Frontend gehen, wobei sowohl React als auch Angular beleuchtet werden.

Bei GraphQL handelt es sich um eine Abfragesprache, die es erlaubt, Daten in einer JSON-ähnlichen Form von einer GraphQL-Schnittstelle abzufragen. Anders als bei REST stehen bei GraphQL aber nicht einzelne Ressourcen mit ihrem jeweiligen URL im Fokus, sondern ein einzelnes GraphQL-Schema, das vom Server angeboten wird. Clients können an dieses Schema Abfragen schicken und erhalten vom Server die entsprechenden Daten geliefert. Das Schema ist statisch typisiert, das heißt, die Entwickler des Schemas geben Typen vor, die beschreiben, welche Art von Daten angeboten werden und wie diese in Beziehung zueinander stehen. Listing 1 zeigt als Beispiel einen Request, wie er in einer Blogging-Anwendung mit Blogartikeln, Autoren und Kommentaren vorkommen könnte. Darin werden alle Artikel abgefragt, wobei von diesen Artikeln nicht sämtliche Felder, sondern nur die id und der title eingeschlossen sind. Außerdem enthält die Abfrage zu jedem Artikel die Autoren sowie Kommentare. Wir sind also in der Lage, in einem einzigen Request genau die Daten abzufragen, die gerade benötigt werden. Als Antwort erhält man eine JSON-Struktur, die genau dieser Abfrage entspricht.

Listing 1

{ articles { id title authors { name } comments { text } } }

Um GraphQL nun auch tatsächlich in einer Clientanwendung nutzen zu können, gibt es mehrere Möglichkeiten. Prinzipiell wäre es natürlich möglich, händisch Abfragen zu senden und die gelieferten Ergebnisdaten wiederum händisch für die Ansicht aufzubereiten. Es existieren aber auch Frameworks, die Entwickler bei der Benutzung von GraphQL unterstützen können. Das ist besonders in Zeiten von deklarativen UI-Bibliotheken wie React sinnvoll, denn so können neben dem UI auch die Datenanforderungen deklarativ beschrieben werden. Eine Komponente sagt dann nicht mehr im imperativen Stil aus, wie die Daten zu beschaffen sind, sondern nur noch, welche Daten benötigt werden.

Ein Framework, das diese Art der Entwicklung unterstützt, ist Apollo Client [1], das als Open-Source-Software zur Verfügung steht. Apollo genießt in der GraphQL-Community einen guten Ruf und ist das vermutlich am häufigsten eingesetzte Clientframework für GraphQL-Anwendungen. Vor allem ist es aber auch für verschiedene UI-Frameworks verfügbar, darunter React, Angular, Vue.js sowie für native Android- und iOS-Anwendungen. In diesem Artikel wollen wir uns auf die Integration und das Zusammenspiel mit React konzentrieren, jedoch soll am Schluss auch Angular kurz in den Blick genommen werden.

Als beispielhafter Kontext soll die bereits erwähnte Blogging-Plattform dienen. Der vollständige Quellcode dieser Anwendung kann unter [2] eingesehen werden, inklusive eines Servers, der als Backend der Anwendung dient und ein fertiges Schema bereitstellt.

Um mit der React-Anwendung zu starten, benötigen wir lediglich eine aktuelle Node.js-Installation und können dann mittels npx create-react-app <projekt-name> das Grundgerüst für die App erzeugen. Im nächsten Schritt müssen wir noch einige JavaScript-Packages für das Apollo-Framework hinzufügen: npm install --save apollo-client apollo-cache-inmemory apollo-link-http graphql graphql-tag react-apollo. Was diese Pakete im Einzelnen machen, werden wir uns gleich noch genauer anschauen.

Die Grundidee von Apollo ist, dass im Frontend ein Store existiert, der die Anwendungsdaten verwaltet. UI-Komponenten beschreiben mittels GraphQL-Querys, welche Daten sie benötigen und erhalten vom Apollo-Store genau diese Daten geliefert. Der Store kümmert sich darum, die Daten bei Bedarf vom Server zu laden und intern zu verwalten. Dazu wird ein lokaler Cache eingesetzt, in dem der Store die Daten ablegt. Ob eine Anfrage einer UI-Komponente aus dem Cache oder vom Server beliefert wird, ist für die UI-Komponente damit transparent.

Set-up

Im ersten Schritt muss nun genau dieser Apollo-Store aufgesetzt und in die React-Anwendung integriert werden. Der Code dazu ist in Listing 2 zu sehen. Dazu wird die bereits vorhandene index.js-Datei entsprechend angepasst.

Erzeugt wird der Store mit der Klasse ApolloClient. Zur Konfiguration müssen die Werte link und cache befüllt werden. Der Link dient dazu, Apollo mitzuteilen, wo das GraphQL-Schema des Servers zu finden ist. Im Beispiel wird der URI als relativer Pfad angegeben. Alternativ sind aber auch vollständige URIs in der Form http://example.com/api/graphql möglich.

Als zweiter Parameter wird definiert, wie das lokale Caching vonstattengehen soll. Die übliche Variante ist der InMemory-Cache, der Daten nur für die Dauer der Browsersession im Speicher hält. Es existieren aber auch alternative Implementierungen, die zum Beispiel die Local-Storage-Funktionalitäten der Browser benutzen, um Daten auch dauerhaft im Browser vorrätig zu halten. Auf diese Weise können sie auch nach einem Reload des Browsers ohne neue Netzwerkkommunikation wieder befüllt werden.

Anschließend muss der ApolloClient noch für React verfügbar gemacht werden. Dies geschieht über die ApolloProvider-Komponente. Diese wrappt unsere eigentlich App-Komponente und sorgt so dafür, dass alle darunter liegenden React-Komponenten GraphQL nutzen können.

Listing 2

import { ApolloC...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang