© motuwe/Shutterstock.com
GraphQL Server auf Basis von React entwickeln

Apollo: Get started!


Das öffentliche GitHub API ist das populärste Beispiel für eine GraphQL-Schnittstelle. Auch wenn GraphQL noch sehr weit davon entfernt ist, REST als führenden Standard für Webschnittstellen abzulösen, gewinnt es stetig an Beliebtheit.

GraphQL [1] ist im Kern lediglich eine Abfragesprache, mit der Sie auf einem Client eine Anfrage nach bestimmten Informationen formulieren und dabei gleichzeitig das Format der Antwort des Servers vorgeben können. Der große Vorteil gegenüber REST ist, dass Sie mehrere Ressourcen gleichzeitig anfragen können und nur die Informationen erhalten, die Sie wirklich benötigen. Die Datenstrukturen werden in GraphQL in einem eigenen Typsystem beschrieben. Mit entsprechenden Werkzeugen können Sie daraus Typdefinitionen in TypeScript oder Flow erzeugen, die Sie auch clientseitig nutzen können. In einer Client-Server-Applikation kommen in der Regel auf beiden Seiten Bibliotheken zum Einsatz, die die meiste Arbeit übernehmen. Eine der populärsten Clientbibliotheken ist der Apollo Client [2]. Diese Bibliothek ist zwar unabhängig von einem bestimmten JavaScript-Framework, wird jedoch sehr häufig in Kombination mit React eingesetzt. In diesem Artikel erhalten Sie einen Einblick in die Welt von GraphQL und sehen, wie Sie einen GraphQL-Server auf Basis von Node.js entwickeln und ihn mithilfe von Apollo Client mit einer React-Applikation verbinden können.

Eine kurze Einführung in GraphQL

Die GraphQL-Spezifikation wurde ursprünglich von Facebook entwickelt. Initial wurde sie unter der viel kritisierten BSD-Lizenz mit Patenterweiterung lizenziert. Wie die meisten anderen Open-Source-Werkzeuge, die von Facebook entwickelt werden, wurde sowohl die Spezifikation als auch die JavaScript-Referenzimplementierung unter eine andere Lizenz gestellt. Die Spezifikation ist mittlerweile OWFa-Lizenz, die Referenzimplementierung unter der MIT-Lizenz verfügbar. GraphQL kann damit bedenkenlos im Unternehmenskontext eingesetzt werden. Da GraphQL im Kern lediglich eine Spezifikation ist, ist die Abfragesprache unabhängig von einer Programmiersprache und kann in JavaScript, Java oder auch Python eingesetzt werden. Für die meisten gängigen Programmiersprachen existieren mittlerweile sowohl Server- als auch Clientimplementierungen.

Bei der Implementierung der Serverseite sollten Sie beachten, dass es sich bei GraphQL nicht um ein Framework, sondern lediglich eine Schicht in Ihrer Applikation handelt. Aus diesem Grund ist es auch möglich, GraphQL mit überschaubarem Aufwand in bestehende Applikationen zu integrieren. Ihre Businesslogik bleibt bestehen, nur die Kommunikationsschicht zum Client muss angepasst werden. Für das Verständnis von GraphQL ist es hilfreich, einige Begriffe und Konzepte zu verstehen, die im Folgenden kurz zusammengefasst werden. GraphQL besteht insgesamt aus drei Bestandteilen: Queries, einem Schema und Resolvern.

Queries

Queries bezeichnen die Abfragen in GraphQL. Die Syntax der Abfragen ähnelt der von JavaScript-Quellcode und besteht aus Funktionen und Objektstrukturen, erweitert um Typinformationen. Die ideale Umgebung für Ihre ersten Schritte mit GraphQL ist das GitHub-API. Der GraphQL-Server bietet mit dem Werkzeug GraphiQL eine grafische Schnittstelle, mit deren Hilfe Sie beispielsweise Queries entwickeln können und sofort eine Rückmeldung erhalten. Das auf GitHub als Explorer bezeichnete GraphiQL erreichen Sie unter [3]. Nachdem Sie sich angemeldet haben, können Sie beliebige Anfragen formulieren. Behalten Sie bei der Verwendung des Explorers stets im Kopf, dass Sie hier mit Echtdaten arbeiten. Bei lesenden Anfragen ist das noch kein Problem. GraphQL ist jedoch auch in der Lage, schreibend auf einen Server zuzugreifen. Das bedeutet, dass Sie hier mit den Berechtigungen Ihres GitHub-Nutzers Änderungen vornehmen können. Als initiales Beispiel können Sie hier die Statistiken über ein Repository auslesen. In Listing 1 sehen Sie die Anfrage.

Listing 1: Lesende Anfrage an den GitHub API Explorer

query getRepoStats($owner: String!, $repoName: String!) { repository(owner:$owner, name:$repoName) { createdAt, forkCount, stargazers { totalCount } watchers { totalCount } } }

Das Schlüsselwort query leitet eine lesende Abfrage ein. Anschließend folgen der Name der Abfrage sowie die Parameterliste. Im Beispiel sind das die Zeichenketten, die den Eigentümer und den Repository-Namen angeben. In der Abfrage selbst geben Sie an, dass Sie an den Informationen über die Ressource repository interessiert sind, und zwar nur für Ressourcen, die den übergebenen Kriterien entsprechen. Innerhalb dieser Funktion definieren Sie die Struktur der Antwort. Sie erhalten das Erstellungsdatum, die Anzahl der Forks, Stars und Watchers für das Repository. Damit die Abfrage funktionieren kann, müssen Sie noch die Belegung der Variablen angeben. Das geschieht über die Sektion Query Variables in GraphiQL. Die Variablen geben Sie in Form eines JSON-Objekts an. Danach können Sie die Anfrage absenden und erhalten eine Antwort, wie Sie sie in Abbildung 1 sehen können.

springer_react_1.tif_fmt1.jpgAbb. 1: Abfrage im GitHub Explorer

Neben den lesenden Anfragen können Sie mit GraphQL auch schreibende Anfragen erzeugen. Diese werden als Mutation bezeichnet. Ein Beispiel für eine solche Mutation kann wie folgt aussehen:

mutation { createTodo(todo: { title:"Get up", status: "open" }) }

Statt des query- wird das mutation-Schlüsselwort verwendet. Die übrige Struktur ähnelt der lesenden Anfrage bis auf die Tatsache, dass Sie innerhalb der Struktur die zu setzenden Werte übergeben.

Schema

Bei der Abfrage eines GraphQL-Servers können Sie nicht einfach beliebige Daten in beliebiger Form abfragen, sondern müssen sich an eine gewisse Struktur halten. Diese Struktur gibt das GraphQL-Schema vor. Das Schema ist ein Baum von Objekten, die mithilfe des GraphQL-Typsystems definiert werden. Mit der Schema Definition Language (SDL) formulieren Sie die Strukturen. Hier ein einfaches Beispiel einer solchen Struktur:

type Todo { id: Number! title: String! status: String! }

Als Typen erlaubt die SDL z. B. skalare Werte wie Ganz- und Fließkommazahlen, Booleans sowie Objekttypen, Interfaces, Unions, Enums und Inputs.

Resolver

GraphQL ist, wie der Name andeutet, eine Abfragesprache. Als solche besitzt sie keinerlei Wissen über die Geschäftslogik Ihrer Applikation. Als Bindeglied zwischen Ihrer Applikation und dem GraphQL-Schema fungieren die Resolver. Ein Resolver ist eine Funktion, die angibt, wie die Daten gelesen oder geschrieben werden müssen, und kann sowohl für lesende als auch für schreibende Zugriffe umgesetzt werden. Um die Umsetzung möglichst flexibel zu halten, kann man Argumente an Resolver übergeben. Diese werden in der Abfrage gesetzt und können im Resolver ausgelesen werden.

Die Serverseite

Nach dieser kurzen Einführung in GraphQL kümmern wir uns im nächsten Schritt um die Implementierung der Serverseite. Mittlerweile gibt es zahlreiche Bibliotheken, die Sie bei der Erzeugung eines GraphQL-Servers unterstützen. Eine der populärsten Umsetzungen ist graphql-js, die Referenzimplementierung von Facebook in JavaScr...

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