Setup von Relay in React Native: Ein technischer Leitfaden

relay einrichtung einführung in unserem vorherigen leitfaden haben wir gelernt, wie man die schema datei erhält, sie speichert und in unsere react native anwendung einfügt in diesem leitfaden werden wir relay installieren und unsere umgebung vorbereiten, um eine react native anwendung zu entwickeln ziel um relay einzurichten, müssen wir zuerst relay in unserer react native anwendung installieren und dann die relay umgebung vorbereiten voraussetzungen wir empfehlen ein grundlegendes verständnis der folgenden themen relay modern , babel js , javascript (ecs5 und ecs6), graphql js readme ein grundlegendes react native projekt, das in ihrer lokalen umgebung läuft eine schema graphql datei, die in ihrem react native projekt heruntergeladen wurde in den folgenden schritten finden sie eine grundlegende relay installation, die sich auf eine react native anwendung konzentriert wenn sie tiefer in dieses thema eintauchen möchten, besuchen sie bitte die offizielle dokumentation 1 installation der offiziellen react relay api lass uns die offizielle bibliothek installieren react relay diese bibliothek ist die offizielle api des relay core teams und hat alles, um die datenfragmente zu erstellen wichtig installiere relay modern für dieses tutorial mit der version 10 0 0 ab version 11 0 0 ist der ansatz zur verwendung von react relay aufgrund der neuen hooks anders 2 relay konfiguration die relay konfiguration enthält die notwendigen informationen für den relay compiler darin werden wir angeben, wo der relay compiler die schema file finden kann, welche ordner durchsucht werden sollen und andere konfigurationen lass uns zuerst das relay config paket installieren hinweis dieses tutorial verwendet yarn als paket client, aber du kannst auch npm verwenden jetzt lass uns die relay konfigurationsdatei erstellen, in der relay den schema pfad finden wird erstelle eine neue datei im stammverzeichnis der anwendung benenne sie als relay config js öffnen sie die datei und speichern sie sie mit den folgenden informationen 3 relay babel plugin um die graphql artefakte zur laufzeit zu konvertieren, müssen wir ein babel plugin installieren jetzt müssen sie in ihrer babel konfigurationsdatei das relay babel plugin im plugins array hinzufügen die endgültige babel config js sieht so aus in expo projekten folgen sie dem gleichen ansatz und fügen das plugins array direkt nach dem presets array in der babel config js hinzu das endergebnis sollte so aussehen 1 module exports = function (api) { 2 api cache(true); 3 return { 4 presets \[ 5 "babel preset expo", 6 ], 7 plugins \[ 8 'relay' 9 ] 10 }; 11 }; das relay plugin muss vor anderen plugins ausgeführt werden, um eine korrekte transformation der graphql artefakte zu gewährleisten überprüfen sie die plugin babel dokumentation, um mehr zu erfahren 4 relay compiler seit unserer ersten dokumentation erklären wir den relay compiler damit unsere anwendung unsere datenfragmente kompilieren kann, werden wir es jetzt installieren lassen sie uns unsere package json öffnen und einen neuen skriptbefehl konfigurieren, um den relay compiler auszuführen watchman ist dafür verantwortlich, zu konfigurieren, ob der relay compiler nach änderungen an den relay fragmenten suchen muss wenn ja, wird er bei jeder änderung erneut ausgeführt wenn nein, wird er ausgeführt, nachdem sie den yarn relay selbst ausgeführt haben die package json datei sollte so aussehen 1 "scripts" { 2 "android" "react native run android", 3 "ios" "react native run ios", 4 "start" "react native start", 5 "test" "jest", 6 "lint" "eslint ", 7 "relay" "relay compiler watchman false" 8 }, 5 führen sie yarn relay aus nachdem die installationsschritte abgeschlossen sind, können wir den befehl yarn relay im stammverzeichnis der anwendung ausführen da wir kein datenfragment erstellen, gibt der relay compiler jede geänderte datei zurück schön, ihre anwendung hat relay bereits installiert und konfiguriert lassen sie uns nun unsere umgebung implementieren, um anfragen an den back4app server zu stellen 6 vorbereitung der fetch umgebung die relay umgebung definiert, wie die netzwerkschicht die anfragen behandelt und wie der relay store funktionieren muss der store steuert unsere daten im frontend, indem er sie nur aktualisiert, wenn sie sich ändern, und sie zwischenspeichert eine einfache umgebung benötigt mindestens die netzwerkschicht und den store netzwerkschicht die netzwerkschicht ist einfach zu erstellen sie wird jede anfrage unserer anwendung bearbeiten, abfragen, mutationen und abonnements (wenn ihre anwendung dies unterstützt) wenn relay es konsumiert, weiß es, wie es die aufrufe zum zugriff auf den anwendungsserver vorbereiten kann relay store der store ist verantwortlich für die aktualisierung der daten unserer anwendung auf der client seite jede anfrage kann eine aktualisierungsfunktion haben innerhalb der aktualisierungsfunktion können sie eine liste von hilfsfunktionen verwenden, um ihre daten mit der store schnittstelle zu aktualisieren um die relay umgebung vorzubereiten, müssen wir eine umgebungs konfigurationsdatei erstellen die datei wird vom abfrage renderer jedes mal gelesen, wenn eine abfrage durchgeführt wird lassen sie uns diese datei vorbereiten 6 1 erstellen sie die umgebungsdatei wir werden dem designprinzip der relay bibliothek folgen, dem konzept der kollektierung um zu beginnen, erstellen wir einen ordner im stammverzeichnis der anwendung und benennen ihn relay erstellen sie darin eine datei und benennen sie sie environment js environment js 6 2 konfigurieren sie die umgebung danach importieren wir von relay runtime relay runtime alles, was wir brauchen 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 konfigurieren sie die netzwerkschicht die netzwerkschicht benötigt eine funktion, um die daten vom server abzurufen zuerst erstellen wir eine fetch funktion, die für die durchführung einer post anfrage verantwortlich ist 1 const fetchquery = async (request, variables) => { 2 const body = json stringify({ 3 query request text, 4 variables, 5 }); 6	 7 const headers = { 8 accept 'application/json', 9 'content type' 'application/json', 10 'x parse application id' 'x parse application id', 11 'x parse client key' 'x parse client key', 12 }; 13	 14 try { 15 const response = await fetch(`https //parseapi back4app com/graphql`, { 16 method 'post', 17 headers, 18 body, 19 }); 20 21 const data = await response json(); 22 23 if (data errors) { 24 throw data errors; 25 } 26 27 return data; 28 } catch (err) { 29 console log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; wir umhüllen die anfrage an das backend mit einem try catch bei einem fehler wird eine ausnahme ausgelöst und die anwendung wird damit umgehen andernfalls folgt das normale verhalten und gibt die daten zurück in der netzwerkschicht konfigurieren sie auch die verbindung zu ihrem anwendungsserver bei back4app verwenden wir zwei hauptschlüssel anwendungs id und client schlüssel die schlüssel müssen in den headern sowie in der server url angegeben werden um diese informationen zu erhalten, gehen sie zu ihrer app und klicken sie auf api konsole > graphql menü mit geöffneter graphql konsole sehen sie die url oben und unten die erforderlichen anwendungsschlüssel ersetzen sie die fetch funktion mit ihren informationen denke daran, den master schlüssel nicht offenzulegen 6 4 exportiere die umgebung die relay runtime bietet die notwendigen funktionen, um die netzwerkebene zu konsumieren und erstellt den store lassen sie uns schließlich alles in eine neue umgebung kombinieren und in unsere anwendung exportieren verwenden sie den folgenden code in ihrer umgebungsdatei 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; die endgültige umgebungsdatei sieht so aus 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 7	 8 const fetchquery = async (request, variables) => { 9 const body = json stringify({ 10 query request text, 11 variables, 12 }); 13	 14 const headers = { 15 accept 'application/json', 16 'content type' 'application/json', 17 'x parse application id' 'x parse application id', 18 'x parse client key' 'x parse client key', 19 }; 20	 21 try { 22 const response = await fetch(`https //parseapi back4app com/graphql`, { 23 method 'post', 24 headers, 25 body, 26 }); 27 28 const data = await response json(); 29 30 if (data errors) { 31 throw data errors; 32 } 33 34 return data; 35 } catch (err) { 36 console log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41	 42 const environment = new environment({ 43 network network create(fetchquery), 44 store new store(new recordsource()), 45 }); 46	 47 export default environment; fazit fantastisch jetzt, da relay und die relay umgebung installiert und konfiguriert sind, ist es an der zeit, die back4app graphql api zu konsumieren der nächste schritt besteht darin, unseren ersten query renderer zu erstellen und ihn mit unserem server zu kommunizieren