Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native

Codieren Sie eine App mit GraphQL, React Native und AWS AppSync: der App

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

In diesen Tutorials werde ich Ihnen zeigen, wie Sie mit AWS AppSync und React Native eine GraphQL-Datenbank erstellen und mit dieser interagieren. Diese App verfügt über Echtzeit- und Offline-Funktionen, die mit AppSync sofort verfügbar sind.

Im vorherigen Beitrag haben wir unser GraphQL-Backend mit dem Amazon AppSync-Dienst eingerichtet. Probieren Sie es aus, wenn Sie es noch nicht getan haben. Wenn Sie eine Einführung in GraphQL wünschen, werfen Sie einen Blick auf einige unserer anderen Beiträge.

In diesem Beitrag werden wir alles zusammenfassen, indem wir durch den Build des React Native-Clients gehen. Das Projekt ist etwas zu kompliziert, um Sie Schritt für Schritt durchzuarbeiten, aber ich erkläre die Projektarchitektur und zeige Ihnen die wichtigsten Teile des Quellcodes.

Übersicht über App-Architektur und Ordnerstruktur

Unsere Anwendung verfügt über einen Haupteinstiegspunkt, der aus zwei Ansichten mit Registerkarten besteht. Auf einer Registerkarte werden die Städte aus unserer GraphQL-Datenbank aufgelistet, auf der anderen Registerkarte wird das Eingabeformular zum Hinzufügen einer neuen Stadt angezeigt. Die Registerkarte Cities ist ein Navigator, mit dem der Benutzer zu den einzelnen Städten navigieren kann.

Wir werden die Hauptkomponenten im source ordner speichern und andere Ordner im src-Verzeichnis haben, um unsere GraphQL-Mutationen, Abfragen und Abonnements zu speichern.

Wir werden auch einen assets-Ordner haben, in dem unsere Bilder gespeichert werden.

folder structure

Erstellen und Konfigurieren des React Native Client

Schauen Sie sich als Referenz den endgültigen Code für diese App im Tutorial GitHub repo an, aber ich werde einige der Schritte skizzieren, die ich unternommen habe, um die App von Grund auf neu zu erstellen.

Zuerst haben wir mit Expo eine neue React Native-Anwendung erstellt.

Im neu erstellten Projekt haben wir unsere Abhängigkeiten installiert. Für die GraphQL- und AppSync-Funktionalität haben wir die folgenden Abhängigkeiten verwendet:

Wir haben auch folgende Abhängigkeiten für das UI-Design verwendet:

Außerdem wurde eine der Vector Icons-Bibliotheken installiert, die wir verknüpft haben:

Nach der Installation unserer Abhängigkeiten haben wir die Datei AppSync.js von unserer AppSync-Konsole heruntergeladen. In unserer AppSync-Projektkonsole haben wir unten React Native ausgewählt und auf die orangefarbene Schaltfläche Herunterladen geklickt, um diese Konfigurationsdatei herunterzuladen.

Diese Konfigurationsdatei enthält die AppSync-Clientinformationen, die zum Erstellen eines neuen Clients erforderlich sind.

Provider und Store konfigurieren

Auf der obersten Ebene der App werden wir unsere Konfiguration vornehmen, um die AppSync-API mit dem React Native-Client zu verbinden. Wenn Sie zuvor Redux oder React Apollo verwendet haben, ist dies alles bekannt. Wenn Sie dies nicht getan haben, denken Sie daran, dass jedes Kind eines Provider, in unserem Fall der ApolloProvider, Zugriff auf die angegebenen Funktionen hat.

Der folgende Code ist unsere neue App.js-Datei, die die Hauptkomponente ist, die von unserem Einstiegspunkt index.js importiert wird.

In dieser Datei richten wir einen neuen AppSync-Client ein, indem wir eine Kombination aus dem AWSAppSyncClient-Konstruktor von aws-appsync und der Konfiguration in unserer Datei aws-exports.js verwenden, die die URL, Region, den Authentifizierungstyp und die GraphQL-API-URL bereitstellt Authentifizierungs-API-Schlüssel.

Anschließend verpacken wir unseren Haupteinstiegspunkt, die Tabs.js-Datei, die unsere Tab-Navigation enthält, in einen ApolloProvider und übergeben den AppSync-Client als Client-Requisite. Wir verpacken die Tabs-Komponente auch in eine Rehydrated-Komponente, die wir aus aws-appsync-react importieren. Dadurch wird sichergestellt, dass wir aus dem asynchronen Speicher gelesen und unseren Cache rehydriert haben, bevor wir die Benutzeroberfläche rendern.

Jetzt kann unsere App Daten von unserem AppSync-Endpunkt abfragen und auch Mutationen und Abonnements durchführen!

Navigation

Der Haupteinstiegspunkt der App ist eine Navigation mit Registerkarten, die in der Datei Tabs.js mit React Navigation implementiert ist.

Wir haben hier einen TabNavigator mit zwei Registerkarten erstellt und exportiert. Diese sind:

  1. Cities - Diese Komponente listet unsere Städte auf und ist an und für sich eine Navigatorkomponente. Diese Komponente ist ein Navigator, da wir in der Lage sein möchten, zu jeder einzelnen Stadt zu navigieren und die Standorte innerhalb der Stadt anzuzeigen.
  2. AddCity - Diese Komponente ist ein Formular, mit dem wir neue Städte hinzufügen können.

Wiederverwendbare Komponenten

Diese App hat nur eine wiederverwendbare Komponente, einen benutzerdefinierten TextInput. Da wir diesen Stil und diese Funktionalität immer wieder duplizieren werden, haben wir beschlossen, ihn zu einer eigenen Komponente zu machen. Die Eingabekomponente ist in Input.js implementiert.

Städteliste und Stadtnavigation

Die Hauptansicht der App ist eine Liste der Städte, die wir aus GraphQL abrufen werden. Wir möchten in der Lage sein, von jeder aufgelisteten Stadt zu einer Detailansicht dieser Stadt zu navigieren, in der wir Standorte hinzufügen können.

Dazu machen wir Cities.js zu einem eigenen StackNavigator und City.js zu der Komponente, zu der wir bei der Auswahl einer Stadt navigieren. Wenn Sie auf eine Stadt in Cities klicken, geben wir ihren Namen und ihre ID als Requisiten an City weiter.

Cities.js

In dieser Komponente rufen wir mithilfe der listCities-Abfrage ab und abonnieren auch das NewCitySubscription, sodass wir beim Hinzufügen einer neuen Stadt, auch von einem anderen Client, dieses Abonnement bearbeiten und unser Array von Städten aktualisieren. Die Abfrage listCities stellt eine Reihe von Städten in unserer Komponente als this.props.cities zur Verfügung.

City.js

In dieser Komponente wird uns eine Stadt als Requisiten aus der Navigation übergeben (verfügbar als props.navigation.state.params.city). Wir verwenden den Stadt-id-Wert, um die Liste der Standorte für die ausgewählte Stadt mithilfe der Abfrage listLocations abzurufen. Wir abonnieren neue Standorte auf ähnliche Weise wie wir neue Städte in Cities.js mit dem NewLocationSubscription-Abonnement abonniert haben. Wir bieten auch optimisticResponse und update funktionen für das Hinzufügen einer neuen Stadt. Optimistische Reaktion

Städte hinzufügen

Schließlich müssen wir die Funktionalität zum Hinzufügen neuer Städte zu unserer GraphQL-API in der Datei AddCity.js implementieren. Zu diesem Zweck haben wir eine Mutation zusammen mit einem Formular verkabelt, das createCity aufruft und den Wert der Formulareingabe übergibt.

AddCity verfügt über eine onAdd-Funktion, die wir in unserer GraphQL-Komposition definieren. Sie schreibt nicht nur eine neue Stadt in unsere GraphQL-Datenbank, sondern implementiert auch eine optimistische Benutzeroberfläche mit einer Kombination aus optimisticResponse und update.

Mutationen, Abfragen und Abonnements

Mutationen, Abfragen und Abonnements sind die Kernfunktionen für die Integration in unsere GraphQL-API. In unserer App wird diese Funktionalität mithilfe des AppSync-Clients in den Dateien Cities.js, City.js und AddCity.js implementiert.

Schauen wir uns genauer an, wie Mutationen, Abfragen und Abonnements in unserem Code implementiert sind.

Abfragen

Schauen wir uns zunächst an, wie Sie eine GraphQL-Abfrage erstellen und exportieren, die mit der listCities-Abfrage in unserem AppSync-Schema interagieren kann. Dieser Code ist in der Datei src/queries/ListCities.js enthalten.

Danach importieren wir diese Abfrage zusammen mit einigen Helfern von react-apollo in die Datei Cities.js und verbinden die Komponente, auf die wir Zugriff auf diese Daten haben möchten, mit compose und graphql von react-apollo.

Jetzt haben wir von unserem GraphQL-Server aus als Requisite Zugriff auf das Städte-Array. Wir können this.props.cities verwenden, um das von GraphQL eingehende Städte-Array abzubilden.

Mutationen

Um eine Mutation zu erstellen, müssten wir zuerst eine grundlegende GraphQL-Mutation erstellen und exportieren. Wir tun dies in der Datei src/mutations/CreateCity.js.

Neu können wir diese Mutation (zusammen mit den Apollo-Helfern) in die Datei AddCity.js importieren und in einer Komponente verwenden:

Jetzt haben wir Zugriff auf eine Requisite namens onAdd, die wir an ein Objekt übergeben, das wir an die Mutation senden möchten!

Abonnements

Mit Abonnements können wir Datenänderungen abonnieren und in Echtzeit in unserer Anwendung aktualisieren. Wenn wir unsere Datenbank durch Hinzufügen oder Entfernen einer Stadt ändern möchten, möchten wir, dass unsere App in Echtzeit aktualisiert wird.

Zuerst müssen wir die Mutation erstellen und exportieren, damit wir im Client darauf zugreifen können. Wir speichern dies in der Datei src/subscriptionsNewCitySubscriptions.js.

Jetzt können wir das Abonnement in die Cities.js importieren und anhängen. Wir haben uns bereits angesehen, wie wir die Städte von unserer API erhalten können. Lassen Sie uns nun diese Funktionalität aktualisieren, um neue Änderungen zu abonnieren und das Städte-Array zu aktualisieren, wenn eine neue Stadt hinzugefügt wird.

Wir fügen eine neue Requisite namens subscribeToNewCities hinzu, die wir in componentDidMount aufrufen. Im Abonnement übergeben wir ein Dokument (die Abonnementdefinition) und updateQuery, um zu beschreiben, was bei dieser Aktualisierung geschehen soll.

Wir zerstören createCity (mit der Mutation) aus den Requisiten, die an die updateQuery-Funktion übergeben werden, und geben alle vorhandenen Werte zusammen mit einem aktualisierten listCities-Array zurück, das die vorherigen Städte zusammen mit den neuen Stadtdaten enthält, die wir von createCity erhalten.

Optimistische Benutzeroberfläche

Was ist, wenn wir nicht darauf warten möchten, dass das Abonnement die aktuellsten Daten von unserer API zurückgibt, um unsere Benutzeroberfläche zu aktualisieren?

Wenn ein Benutzer eine neue Stadt erstellt, möchten wir sie automatisch zum Städte-Array hinzufügen und in unserer App rendern lassen, bevor wir eine Bestätigung vom Back-End-Service erhalten.

Wir können dies leicht mit ein paar Techniken und Funktionen tun.

Aktualisieren wir unsere AddCityMutation auf Folgendes (Sie können diesen Code in der Quelldatei AddCity.js anzeigen):

Hier haben wir dem Argumentobjekt für die Mutationsfunktion zwei neue Eigenschaften hinzugefügt:

  1. optimisticResponse definiert die neue Antwort, die in der Aktualisierungsfunktion verfügbar sein soll
  2. Für die update werden zwei Argumente verwendet: der Proxy (mit dem Sie aus dem Cache lesen können) und die Daten, die Sie für die Aktualisierung verwenden möchten. Wir lesen den aktuellen Cache (proxy.readQuery), fügen unser neues Element dem Array von Elementen hinzu und schreiben dann zurück in den Cache, der unsere Benutzeroberfläche aktualisiert hat.

Abschluss

GraphQL wird immer mehr zum Mainstream. Ein Großteil der Komplexität von GraphQL hängt mit der Verwaltung des Backends und der API-Schicht zusammen. Tools wie AppSync abstrahieren diese Komplexität jedoch, sodass Entwickler nicht mehr die meiste Zeit mit der Konfiguration und Arbeit am Server verbringen müssen.

Ich freue mich auf viel mehr Innovation in diesem Bereich und kann es kaum erwarten zu sehen, was wir 2018 noch sehen werden!

Wenn Sie AppSync zusammen mit dem Serverless Framework verwenden möchten, lesen Sie diese großartige Einführung in die Verwendung der beiden zusammen.

Wenn Sie mehr über AWS AppSync erfahren möchten, empfehlen wir Ihnen einen Blick auf die AppSync-Homepage und die Dokumentation zum Erstellen eines GraphQL-Clients.

Wenn Sie zu diesem Projekt beitragen möchten, können Sie sich mit unserem GitHub-Repo verbinden. Wenn Sie Ideen haben, senden Sie uns bitte eine PR oder verwenden Sie diese App als Starter für Ihr nächstes React Native GraphQL-Projekt!

In der Zwischenzeit können Sie einige unserer anderen React Native-Tutorials hier auf Envato Tuts+ lesen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.