GraphQL in Flutter

Eine Beispielimplementierung zur Kommunikation zwischen einer Flutter-Applikation und einer GraphQL-Schnittstelle

Wer kennt es nicht? Es müssen Daten von einem Webservice beziehungsweise einer API abgerufen werden. Für eine solche entsprechende Kommunikation ist der Ansatz einer REST-Schnittstelle sehr weit verbreitet. Eine Alternative zum REST-Verfahren bietet GraphQL. Die von Facebook 2015 veröffentlichte Datenabfragesprache ermöglicht ebenfalls das Abrufen von Daten von einem Webservice. Mit Hilfe von GraphQL sollen folgende Punkte ermöglicht werden (https://graphql.org/):

  • Eine vollständige und verständliche Beschreibung der Daten
  • Abfrage der Daten, die wirklich benötigt werden → Bessere Strukturierung der Daten
  • Erleichtert die Entwicklung der APIs (auch über einen längeren Zeitraum)
  • Leistungsstarke Entwicklertools

Nun stellt sich die Frage, inwiefern eine Kommunikation innerhalb einer Flutter-Applikation mit einer GraphQL-Schnittstelle aussehen kann. Dafür wird als Beispiel-API die SpaceX GraphQL-API verwendet: https://studio.apollographql.com/public/SpaceX-pxxbxen/home?variant=current

GraphQL in Flutter – so setzen Sie die Schnittstellen-Kommunikation um

Zur Umsetzung der GraphQL-Schnittstellen-Kommunikation wird die graphql_flutter-Bibliothek verwendet: https://pub.dev/packages/graphql_flutter. Diese befindet sich derzeit bei der Version 5.1.0 und bietet viele verschiedene Features wie bspw. Pagination oder auch verschiedenen Cache Strategien. Im Nachfolgenden wird anhand eines simplen Beispiels veranschaulicht, inwiefern eine Kommunikation zu einer GraphQL-Schnittstelle in Flutter umgesetzt werden kann.

GraphQL in Flutter – ein Anwendungsbeispiel

In diesem Beispiel wird zur Verdeutlichung einer standardmäßigen Implementierung eine GraphQL-Schnittstelle verwendet, welche Daten von SpaceX offeriert (https://api.spacex.land/graphql/).

Wir wollen Daten von den Starts der Raketen abrufen. Dahingehend wird eine entsprechende GraphQL-Abfrage benötigt, welche diese Daten anfordert. Die genannte API ist sehr benutzerfreundlich und unterstützt den Developer bei Erstellung der Abfrage. Die Abfrage, die wir verwenden, sieht wie folgt aus:

GraphQL in Flutter | string query

Die gezeigte Query kann dann für das Bauen der eigentlichen Abfrage verwendet werden. Dafür werden im Widget-Tree der anzuzeigenden UI folgende Widgets genutzt:

GraphQL in Flutter | override

Wie man hier sehen kann, wird im body das Query-Widget verwendet, welches als options-Parameter ein QueryOptions-Widget erhält. Innerhalb des QueryOptions-Widgets wird ein document-Parameter erwartet. Dort wird die vorher definierte Query, welche wir

GraphQL in Flutter | result is loading

als String definiert haben, übergeben. Des Weiteren sieht man hier das Festlegen der sogenannten fetchPolicy. Damit sind Cache-Strategien gemeint. In der Abbildung erkennt man noch den builder. Dort kann dann, sofern der Aufruf ausgeführt wurde, auf das Ergebnis des Aufrufs zugegriffen werden.

Ist der Aufruf noch nicht komplett ausgeführt worden, so wird ein zirkulärer Ladeindikator angezeigt. Dies kann man durch die Eigenschaft isLoading vom Ergebnis detektieren und entsprechend anzeigen. Sollte das Ergebnis des Aufrufs einen Fehler beinhalten, so kann dies mit dem Aufruf von hasException erkannt werden. Sofern dies zutrifft, wird lediglich ein Text mit der Problembeschreibung angezeigt. Sollte keiner der beiden Fälle zutreffen, so kann auf die Daten, in unserem Falle die Starts der Raketen von SpaceX, zugegriffen werden:

GraphQL in Flutter | final list

Das Zwischenlagern der Daten passiert in Zeile 38. Dort wird auf die Daten des Ergebnisses anhand des angegebenen Feldes zugegriffen. Da es mehrere Raketen-Starts gab, wird hierbei mit einer Liste gearbeitet. Diese kann dann wie gewohnt dem ListView-Builder übergeben werden. Für die ListView-Items wird ein Stack und entsprechende Sub-Widgets verwendet.

GraphQL in Flutter | backgroundimagewidget

Unser Fachbereich Flutter stellt sich vor

Um eine mobile Lösung zu entwickeln, bietet der Markt verschiedene Entwicklungsplattformen an. Besonders eine erfreut sich dabei immer größerer Beliebtheit: Flutter. Erfahren Sie mehr über unseren Fachbereich Flutter.
Flutter Fachbereich
GraphQL in Flutter | opacityLayerWidget

Ausgehend vom backgroundImageWidget wird hinsichtlich der Liste ein zufälliges Bild ausgewählt, welches das Listitem dann darstellt. Das opacityLayerWidget wird verwendet, um das Bild zu schwärzen. Dadurch wird die Schrift auf dem Bild leichter lesbar (siehe Video der endgültigen App).

Zunächst einmal das Anzeigen des Bildes: Für eine visuelle Aufbereitung der Listitems werden lokale Bilder verwendet. Diese befinden sich in den assets des Projekts. Dafür existiert eine Liste als Konstante, welche die Bildernamen enthält:

GraphQL in Flutter | const images

Schlussendlich sollen noch ein paar Kennzahlen der jeweiligen Raketenstarts angezeigt werden. Dies geschieht in den folgenden Widgets:

GraphQL in Flutter | missionNameWidget

Auf dem zufällig generierten Bild werden dann die folgenden Daten veranschaulicht:

  • Missionsname
  • Raketenname
  • Gewicht
GraphQL in Flutter | rocketNameandWidget

Final muss einmal die globale URL der API festgelegt und der Client definiert werden:

GraphQL in Flutter | HttpLink

Der definierte Client wird dann im GraphQLProvider-Widget benutzt, welcher sich im MaterialApp-Widget befindet.

GraphQL in Flutter | MaterialApp

Die fertige Applikation sieht dann wie folgt aus:

Zusätzliche Anmerkungen zu GraphQL in Flutter

Das gezeigte Codebeispiel soll lediglich eine Implementierungsweise vorstellen, um Daten von einer GraphQL-Schnittstelle abrufen zu können. Allerdings bietet die graphql_flutter-Bibliothek weitere GraphQL-Spezifikationen an. Um Daten beispielsweise serverseitig zu modifizieren sind die sogenannten Mutations möglich. Zudem sind auch Subscriptions mit der Bibliothek umsetzbar, um kontinuierliche Updates von einer GraphQL-Schnittstelle zu erhalten. Weitere Spezifizierungen können unter https://pub.dev/packages/graphql_flutter nachgelesen werden.

Fazit

Abschließend kann gesagt werden, dass die graphql_flutter-Bibliothek ihren Zweck erfüllt und die Verwendung von GraphQL-APIs sehr einfach handhabbar umsetzt. Man muss lediglich die Basis-URL einmalig festlegen und kann dann über die GraphQL-Queries die Daten steuern, die entsprechend abgerufen und angezeigt werden sollen. Neben dem „standardmäßigen“ Abrufen der Daten bietet die Bibliothek wie beschrieben auch die weiteren GraphQL-Spezifikationen wie Mutations und Subscriptions an. Somit ist der wesentliche Funktionsumfang abgedeckt und ermöglicht das Verwenden von GraphQL-Schnittstellen in einer Flutter Applikation.

Lesen Sie auch...

×
Telefon

Sie sind auf der Suche nach einem Experten im Bereich App-Entwicklung? Wir freuen uns auf Ihre Nachricht!

+49 231 99953850
×