© Excellent backgrounds/Shutterstock.com
Java Magazin
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.

Manuel Mauky


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 kur...

Java Magazin
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.

Manuel Mauky


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 kur...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang