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

Erstellen von serverlosen GraphQL- und REST-APIs mit AWS Amplify

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Mit AWS Amplify können Entwickler schnell leistungsstarke Services in der Cloud erstellen und eine Verbindung zu diesen herstellen. Im vorherigen Tutorial haben Sie gelernt, wie Sie Amplify in einem React-Projekt einrichten und wie Sie Authentifizierung, S3-Speicher und Hosting verwenden. Wenn Sie eine Einführung in AWS Amplify benötigen, lesen Sie zuerst diesen Beitrag.

In diesem Beitrag werden wir mit React und AWS Amplify weiter gehen und Funktionen wie eine verwaltete GraphQL-Datenschicht und Lambda-Funktionen untersuchen.

Hinzufügen einer GraphQL-API

Schauen wir uns an, wie Sie unserem Projekt eine AWS AppSync GraphQL-API hinzufügen und sie in unserem Projekt verwenden.

Die API, die wir erstellen, ist eine Restaurant-API, mit der wir mit den Restaurants Schritt halten können, die wir mögen oder besuchen möchten.

Um die GraphQL-API zu unserem Projekt hinzuzufügen, können wir den folgenden Befehl verwenden:

Sie werden aufgefordert, einige Konfigurationsfragen zu beantworten. Wählen Sie die folgenden Optionen:

  • Diensttyp: GraphQL
  • API-Name: TutsGraphQLAPI
  • Berechtigungstyp: API-Schlüssel
  • kommentiertes GraphQL-Schema: N.
  • geführte Schemaerstellung: Y.
  • Was beschreibt Ihr Projekt am besten? Einzelobjekt mit Feldern (z. B. "Todo" mit ID, Name, Beschreibung)
  • Möchten Sie das Schema jetzt bearbeiten? Y.

Wenn Sie dazu aufgefordert werden, aktualisieren Sie das Schema wie folgt und speichern Sie die Datei:

Dadurch wird nur ein einziger Datentyp - Restaurant - mit den erforderlichen ID- und Namensfeldern sowie einer optionalen Beschreibung erstellt.

Als nächstes senden wir die Updates an unser Konto:

Jetzt wurde die API erstellt!

Was ist gerade hier passiert? AWS Amplify verwendete die integrierte GraphQL Transform-Bibliothek, um eine vollständige GraphQL-API zu erstellen, einschließlich zusätzlicher Schemata, Resolver und einer Datenquelle.

Um die neue AWS AppSync-API jederzeit nach ihrer Erstellung anzuzeigen, können Sie das Dashboard unter https://console.aws.amazon.com/appsync aufrufen und auf die gerade erstellte API klicken (Stellen Sie sicher, dass Ihre Region richtig eingestellt ist). Im AWS AppSync-Dashboard können Sie die API-Konfiguration anzeigen und Abfragen und Mutationen für die API ausführen.

Ausführen von GraphQL-Mutationen

Als nächstes interagieren wir mit der API aus unserer React-Anwendung.

Das erste, was wir tun möchten, ist eine Mutation zu erstellen. In GraphQL entsprechen Mutationen den PUT-, PUSH- und DELETE-Operationen von REST. Da wir noch keine Daten in unserer Datenbank haben, erstellen wir eine Mutation, um ein neues Restaurantelement zu erstellen.

Dazu importieren wir API und graphqlOperation aus AWS Amplify, definieren eine Mutation und führen dann die Mutation aus.

Schauen wir uns eine Beispiel-App an, die eine Mutation implementiert. In App.js importieren wir zuerst React, unser App-CSS und die erforderlichen AWS Amplify-Komponenten.

Als nächstes definieren wir eine Mutation, um ein Restaurant zu erstellen. Wir geben an, dass die Mutation einen Namen und eine Beschreibung akzeptiert und den Namen createRestaurant trägt. Diese Mutation wurde automatisch definiert, als wir das obige Restaurant-Schema erstellt haben. Beachten Sie, dass die Mutation in GraphQL angegeben ist - einer domänenspezifischen Abfragesprache.

Jetzt erstellen wir unsere App-Komponente.

Als nächstes definieren wir noch innerhalb der App-Komponente eine Funktion zum Ausführen der Mutation. Dadurch wird die Mutation ausgeführt, indem API.graphql aufgerufen und die Mutation und die Daten übergeben werden.

Dann rendern wir die Komponente und verknüpfen unsere Change-Handler- und Mutationsfunktionen.

Schließlich exportieren wir die App-Komponente mit Authentifizierung.

Sie sollten in der Lage sein, diesen Code auszuführen und neue Restaurantelemente in der API zu erstellen.

Um die tatsächliche Datenquelle anzuzeigen und festzustellen, ob die Daten vorhanden sind, öffnen Sie das AWS AppSync-Dashboard, wählen Sie Ihre API aus, klicken Sie im linken Menü auf Datenquellen und dann auf den Ressourcennamen. Dadurch wird die Amazon DynamoDB-Tabelle geöffnet. In der Tabelle können Sie die Daten auf der Registerkarte Elemente anzeigen.

Ausführen von GraphQL-Abfragen

Schauen wir uns als Nächstes an, wie Daten über die API abgefragt werden. Wir werden dies in drei Schritten implementieren:

  1. Definieren Sie eine Abfrage
  2. Führen Sie die Abfrage aus, wenn die App geladen wird
  3. Speichern Sie das Ergebnis der Abfrage in unserem Status und rendern Sie es in der Benutzeroberfläche

Definieren wir zunächst die Abfrage in einer neuen Komponente. Wir verwenden wieder die GraphQL-Sprache, um die Abfrage anzugeben. Wir verwenden die listRestaurants-Abfrage, die automatisch definiert wurde, als wir das Restaurants-Schema verschoben haben. Das folgende Snippet gibt an, dass wir eine Liste von Elementen mit jeweils einer ID, einem Namen und einer Beschreibung erwarten.

Als Nächstes müssen wir einen zusätzlichen Anfangszustand hinzufügen, um die vom Server zurückgegebenen Restaurants zu speichern.

Wir müssen auch ein componentDidMount-Lebenszyklusereignis hinzufügen, um Daten vom GraphQL-Server abzufragen. Diese asynchrone Methode aktualisiert den Komponentenstatus, wenn die Restaurantliste vom Server zurückgegeben wird.

Schließlich erstellen wir eine Komponente, die das restaurants-Array vom Komponentenstatus auf HTML abbildet.

Wenn wir nun die App ausführen, sehen wir, dass die Daten von der API in einer Liste auf dem Bildschirm gerendert werden. Die App zeigt jedoch keine Änderungen an, wenn die Daten aktualisiert werden, z. B. wenn Sie ein neues Restaurant hinzufügen.

Aktualisieren wir zunächst die Methode createRestaurant, um eine optimistische Antwort auf die Benutzeroberfläche zu erhalten. Wenn wir gerade ein neues Element erstellen, wird die Datenbank aktualisiert, aber die Benutzeroberfläche kennt das neue Element noch nicht. Um dies zu beheben, aktualisieren wir das Restaurant-Array in der createRestaurant-Methode, indem wir das neue Element zum Array hinzufügen:

Echtzeit-Datenabonnements

Als nächstes möchten wir in der Lage sein, mit Echtzeitdaten zu arbeiten. In GraphQL können Sie mit Abonnements in Echtzeit auf Daten warten. Wenn neue Daten verfügbar sind, wird das Abonnement ausgelöst und die neuen Daten werden über das Abonnement weitergegeben. Es liegt an uns auf Kundenseite, mit diesen neuen Daten umzugehen.

In unserer App abonnieren wir die verschiedenen Restaurants und erstellen ein onCreateRestaurant-Abonnement, das jedes Mal ausgelöst wird, wenn ein neues Restaurant erstellt wird. Anschließend nehmen wir das neue Element aus dem Abonnement, aktualisieren unser vorhandenes Array und rufen setState auf, um die Benutzeroberfläche mit den neuen Daten neu zu rendern.

Genau wie bei Mutationen und Abfragen definieren wir zunächst das Abonnement in der domänenspezifischen GraphQL-Sprache.

Das Abonnement wird entweder vor oder nach der bereits eingerichteten GraphQL-Abfrage in der Lifecycle-Methode componentDidMount erstellt:

Wenn Sie jetzt zwei Browserfenster öffnen, sollten Sie in der Lage sein, eine Mutation auf einem Bildschirm zu erstellen und zu sehen, dass die Aktualisierung auf allen anderen Bildschirmen erfolgt.

Wenn Sie sich die .filter-Methode ansehen, die wir beim Erstellen des neuen Restaurants-Arrays im Abonnement verwendet haben, können Sie feststellen, ob Duplikate vorhanden sind, die denselben Namen und dieselbe Beschreibung enthalten. Ein besserer Weg, dies in der Produktion zu tun, wäre möglicherweise, eine eindeutige Client-ID zu erstellen, die ebenfalls in der Datenbank gespeichert ist, und basierend auf dieser Kennung zu filtern.

Erstellen einer REST-API mit AWS Lambda

GraphQL ist eine wunderbare Spitzentechnologie, aber manchmal erfordert unser Projekt die Erstellung einer traditionellen REST-API. Mit AWS Lambda und Amplify ist es auch einfach, serverlose REST-APIs mithilfe der CLI zu erstellen.

Bei der Erstellung der GraphQL-API haben wir den Befehl amplify create api verwendet. Dieser Befehl gibt uns die Möglichkeit, entweder eine GraphQL-API oder eine REST-API zu erstellen. Die REST-API kann so konfiguriert werden, dass entweder eine eigenständige serverlose Express-Funktion oder eine serverlose JavaScript-Funktion verwendet wird, die für die Arbeit mit Amazon DynamoDB CRUD-Vorgängen vorkonfiguriert ist.

Die Option, die wir für diese API verwenden, ist eine serverlose Express-Funktion.

Lassen Sie uns fortfahren und die neue Funktion hinzufügen:

Wie üblich werden Sie aufgefordert, einige Konfigurationsdetails einzugeben. Geben Sie die folgenden Optionen an:

  • Servicetyp: REST
  • Geben Sie einen Ressourcennamen ein, der im Projekt verwendet wird: z. B. amplifyrestapi
  • Geben Sie einen Pfad für die REST-Endpunkte ein: z. B. /people
  • Lambda-Quelle: Erstellen Sie eine neue Lambda-Funktion
  • Name der AWS Lambda-Funktion: Amplifyrestapifunction
  • Funktionsvorlage: Serverlose Express-Funktion (Integration mit Amazon API Gateway)
  • die lokale Lambda-Funktion jetzt bearbeiten? Y.

Jetzt können Sie die Lambda-Funktion lokal bearbeiten. In der Datei ersetzen wir die vorhandene app.get('/people')-Methode  durch die folgende:

Dies gibt nur eine konstante Liste von Namen für Demozwecke zurück. Speichern Sie diese Datei und fahren Sie mit den folgenden Antworten fort:

  • API-Zugriff einschränken? Ja
  • Wer sollte Zugang haben? Nur authentifizierte Benutzer
  • Welche Art von Zugriff möchten Sie für authentifizierte Benutzer? lesen
  • einen anderen Pfad hinzufügen? N

Dadurch wurde lokal eine neue Lambda-Funktion erstellt, die wir bei Bedarf aktualisieren und auf unser Konto übertragen können. Der Code für diese Lambda-Funktion befindet sich unter amplify/backend/function/amplifyrestapi/src.

Lassen Sie uns nun die Updates auf unser Konto übertragen:

Abfragen der REST-API vom Client

Jetzt ist unsere Lambda-Funktion betriebsbereit und wir können mit ihr interagieren!

Lassen Sie uns zunächst die Daten aus der neuen API abfragen und in unserer Benutzeroberfläche anzeigen. Zu diesem Zweck verwenden wir die API-Klasse von Amplify und rufen API.get auf. Im vorherigen Abschnitt haben wir API.graphql verwendet, um Anforderungen an unsere GraphQL-API zu stellen. In der API-Klasse sind jedoch viele Methoden verfügbar. Weitere Informationen zur API-Klasse finden Sie in den offiziellen Dokumenten.

Jetzt sollten wir in der Lage sein, die App auszuführen, die Personendaten von unserer API abzurufen und auf dem Bildschirm zu rendern.

Aktualisieren einer Lambda-Funktion über die CLI

Zusätzlich zum Erstellen einer neuen Lambda-Funktion können wir unsere Lambda-Funktion auch über die CLI aktualisieren.

Lassen Sie uns die Funktion ändern, um eine API zu treffen und Daten anstelle von Hardcodierungskonstanten abzurufen. Zu diesem Zweck verwenden wir die axios-Bibliothek zum Erstellen der HTTP-Anforderungen und rufen Daten von der Star Wars-API ab.

Um Axios zu verwenden, müssen wir zu amplify/backend/function/amplifyrestapi/src navigieren und dort installieren. Axios wird im Projektordner der Lambda-Funktion installiert, nicht im Hauptordner der App, da es auf der Serverseite der Lambda-Funktion ausgeführt wird.

Nachdem axios installiert ist, aktualisieren wir die Lambda-Funktion, um Daten von der Star Wars-API abzurufen:

Speichern Sie nun die Datei und führen Sie amplify push aus dem Hauptprojektordner aus, um Ihre Lambda-Funktion in der Cloud zu aktualisieren:

Jetzt ist unsere API aktualisiert und einsatzbereit!

Wenn wir die App aktualisieren, sollten wir jetzt die Daten sehen, die von der Star Wars-API zurückgegeben werden.

Schlussfolgerung

In dieser Serie haben Sie gelernt, wie Sie mit AWS Amplify beginnen und es Ihrem React-Projekt hinzufügen sowie Authentifizierung, Speicherung, Hosting und eine GraphQL- oder REST-API hinzufügen - ohne dass Sie einen Server manuell codieren oder bereitstellen müssen. Das ist viel Kraft für App-Entwickler!

Ich hoffe, diese Beiträge haben Sie dazu inspiriert, Ihre eigenen serverlosen Webanwendungen mit serverloser Technologie und AWS Amplify zu erstellen! Teilen Sie uns Ihre Meinung in den Kommentaren unten mit.

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.