GraphQL Relay Einführung für Entwickler mit Back4App

18 min

einstieg in graphql relay einführung in diesem leitfaden lernen sie, was relay ist, wie man mit dem schema arbeitet und wie man mit graphql auf back4app arbeitet voraussetzungen dies ist noch kein tutorial, aber um sich beim lesen wohlzufühlen, benötigen sie grundkenntnisse in javascript grundverständnis von graphql wenn sie das nicht haben, ist der graphql js ein perfekter ausgangspunkt relay relay ist ein graphql client, der vom facebook engineering team entwickelt wurde und für die leistung beim erstellen datengetriebener anwendungen konzipiert ist genauer gesagt ist relay ein framework zum deklarativen abrufen und verwalten von graphql daten auf der client seite, das strenge konventionen verwendet, um den erfolg ihrer anwendung zu unterstützen es wurde mit blick auf skalierbarkeit entwickelt, um komplexe anwendungen wie facebook zu unterstützen das ultimative ziel von graphql und relay ist es, sofortige ui antwortinteraktionen zu liefern einer der hauptvorteile von graphql ist, dass sie mit einer einzigen abfrage alle daten abrufen können, die benötigt werden, um beispielsweise eine anwendungsseite zu erstellen natürlich ist das gut (sie können rundreisen zum server sparen), aber damit kommt ein problem sie können unterschiedliche abfragen für dasselbe element verwenden, wenn sie dieses element in verschiedenen teilen ihrer anwendung wiederverwenden um dieses problem zu vermeiden, verwendet relay ein wichtiges konzept kolokation kolokation bei der verwendung von relay leben komponenten und ihre datenanforderungen zusammen die datenanforderungen der komponenten werden innerhalb dieser deklariert das bedeutet, dass alle komponenten die daten deklarieren, die sie benötigen relay stellt sicher, dass jede komponente die daten hat, die sie beim rendern benötigt die relay struktur hinter dem konzept der kolokation sind die container der gebräuchlichste ist der relay fragment container der container ist die komponente, die versucht, die beim rendern jeder komponente erforderlichen daten zu erfüllen die container deklarieren ihre datenabhängigkeit mithilfe von graphql fragmenten jede komponente hat ihren eigenen fragment container der container ruft die daten nicht direkt ab; er deklariert nur die spezifikation für die beim rendern benötigten daten die daten werden serverseitig abgerufen relay stellt sicher, dass die daten verfügbar sind, bevor das rendering erfolgt relay komponiert einen datenbaum mit diesen containern, ignoriert die redundanzen und ruft die daten auf dem server ab lassen sie uns das konzept mit einem beispiel veranschaulichen ein fragment ist eine auswahl von feldern eines graphql typs relay arbeitet mit fragmenten, paginierung und refetch containern der gebräuchlichste ist ein fragment container siehe unten ein fragment in graphql und danach dasselbe in relay 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4	 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12	 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20	 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); im ersten code sehen sie die graphql version, die es uns ermöglicht, diese abfrage in wiederverwendbare fragmente zu unterteilen im nächsten code sehen sie die relay version, die die fragmente und die daten zusammen im selben komponenten anzeigt kollokation bedeutet, dass daten und sichtdefinitionen zusammen existieren kollokation hat einige vorteile wir müssen nur genau das datum deklarieren, das wir benötigen das bedeutet, dass es schwierig ist, daten übermäßig abzurufen, was unsere anwendung verbessert, und es ist schwierig, daten unzureichend abzurufen, was fehler mit fehlenden daten verhindert ein weiteres wichtiges konzept ist die datenmaskierung, was bedeutet, dass komponenten nur auf die daten zugreifen können, die sie angefordert haben datenmaskierung hilft, abhängigkeitsfehler zu verhindern außerdem werden komponenten nur aktualisiert, wenn sich die daten, die sie verwenden, ändern abfrage renderer modern wir empfehlen, einen blick auf die offiziellen dokumentation des abfrage renderers https //relay dev/docs/en/query renderer html#docsnav zu werfen, um ein besseres verständnis zu erhalten basierend auf den fragmentcontainern wird relay diese lesen und die anfrage an den server basierend auf den daten stellen, die sie haben aber wie erfolgt diese anforderung? hier kommt der abfrage renderer modern ins spiel der abfrage renderer modern ist die komponente, die die fragmentcontainer liest, die anfrage an den server stellt und die daten an die komponente zurückgibt jede wurzelkomponente wird einen abfrage renderer modern haben, der diese anfrage stellt im obigen beispiel haben wir eine abstraktion, sodass wir nur das fragment übergeben, das gelesen werden muss, und so wird die gesamte restliche arbeit innerhalb von createqueryrenderermodern erledigt im nächsten schritt des dokuments werden wir den createqueryrenderermodern eingeben, um die abstraktion basierend auf dem obigen reinen beispiel zu verstehen unten ist ein reines beispiel für query render modern 1 export default function artistrenderer({artistid}) { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql` 6 query queryrenderersartistquery($artistid string!) { 7 # the root field for the query 8 artist(id $artistid) { 9 # a reference to your fragment container 10 artistheader artist 11 } 12 } 13 `} 14 variables={ {artistid} } 15 render={({error, props}) => { 16 if (error) { 17 return \<div>{error message}\</div>; 18 } else if (props) { 19 return \<artist artist={props artist} />; 20 } 21 return \<div>loading\</div>; 22 }} 23 /> 24 ); 25 } wir können sehen, dass der query renderer modern ein hoc komponente mit anderen worten, umhülle die komponente, die den container mit den abzurufenden daten besitzt, mache die anfrage mit der relay umgebung und gebe die daten nach unten weiter, indem du sie an die komponente übergibst automatische typgenerierung wenn wir mit relay arbeiten, können wir eine anwendung typensicher erstellen wie gesagt, wird jede komponente der besitzer ihrer daten sein wenn wir also den relay compiler ausführen, liest er jedes fragment von daten und überprüft es mit deinem graphql schema wenn alle überprüfungen des relay compilers in ordnung sind, werden die typen in einem ordner namens generated dieser ordner wird innerhalb der ordner der wurzelkomponenten erstellt siehe das folgende beispiel komponenten home überprüft die api gesundheit 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8	 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16	 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); generierter ordner mit den typen für die home komponente und die generierten typen danach müssen wir nur den typ in die komponente importieren und zusammensetzen 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; der typ wird in flow generiert, der kernsprache für typen von facebook aber mit einer bibliothek können sie in typescript generieren dies ist am häufigsten, um mit react native zu arbeiten zusammenfassend können wir mit dem relay compiler die datenimplementierung vor der laufzeit überprüfen dies hilft uns, fehler zu vermeiden und die anwendungsqualität sowie die entwicklungszeit zu verbessern bei abfragen können wir doppelte daten in n verschiedenen komponenten vermeiden es wird überprüft, ob einige daten dupliziert sind wenn ja, werden die redundanzen entfernt dies reduziert die payload größe der abfragen und erhöht die leistung der anwendung noch weiter entwicklung bei abfragen können wir doppelte daten in n verschiedenen komponenten vermeiden es wird überprüft, ob einige daten dupliziert sind wenn ja, werden die redundanzen entfernt dies reduziert die payload größe der abfragen und erhöht die leistung der anwendung noch weiter auf der serverseite back4app back4app generiert eine sofort einsatzbereite relay konforme graphql api, die sie in ihrem projekt verwenden können was back4app für sie generiert, damit sie es nicht selbst auf der serverseite erstellen müssen infrastruktur im back4app dashboard können sie ein vollständiges datenmodell mit klassen, typen und allem, was eine datenbank benötigt, erstellen sie müssen sich nicht um die einrichtung und wartung des servers selbst kümmern nachdem sie ihr datenmodell in back4app erstellt haben, generieren wir alles, was notwendig ist, um es auf der frontend seite mit graphql zu konsumieren lassen sie uns einen blick auf das graphql api schema werfen schema die schema datei ist der kern jeder graphql anwendung sie beschreibt den gesamten server, der auf der client seite verwendet werden kann relay funktioniert mit ihrer schema datei, um die abfrage string zu bestätigen und die generierte datei erscheint in / generated /mycomponent graphql, wie wir im automatische typgenerierung thema gesagt haben um den relay compiler zu verwenden, benötigen sie entweder eine graphql oder json graphql schema datei, die die api ihres graphql servers beschreibt diese dateien sind lokale darstellungen einer server quelle der wahrheit und werden nicht bearbeitet jedes schema von graphql kann aus abfragetyp, mutationstyp und subscriptionstyp bestehen um mit einem schema zu arbeiten, das von relay im frontend konsumiert wird, benötigen sie einige der kernkonzepte im backend node interface und verbindung wir empfehlen, über das node interface und relay verbindungen zu lesen, um das lesen einfacher zu abstrahieren knoten schnittstellen die knoten schnittstelle implementiert jeden typ in graphql, um daten über die id abzurufen dies ist eine implementierung, um das abrufen von daten vom server zu erleichtern und zu aktualisieren so hat jede datenart eine eindeutige id, die als global eindeutige id bezeichnet wird, die durch eine knoten schnittstelle implementiert wird mit knoten vermeidet relay verschachtelte abfragen und ermöglicht das abrufen und erneute abrufen von daten dies ist schwer zu implementieren und erfordert etwas arbeit, aber wir haben das bereits für sie erstellt! seitenumbruch entwickelt, um zusammengesetzt zu werden, sowohl im frontend als auch im backend wird relay uns helfen, unsere daten zu komponieren um mit der seitenumbruch zu arbeiten, haben wir verbindungen diese verbindungen implementieren den knoten des typs, den wir abrufen, und haben ein standardmodell, das die implementierung der seitenumbruch auf der serverseite erleichtert glücklicherweise haben wir das bereits für die verwendung im frontend erstellt fazit in diesem leitfaden haben wir vorgestellt, was relay ist, seine hauptkonzepte und wie es funktioniert außerdem konnten wir sehen, wie back4app die erstellung des graphql servers automatisiert und uns eine vollständige datenbank mit graphql api zur verfügung stellt, mit der wir arbeiten können zusammenfassend lässt sich sagen, dass das gesamte backend bereits von back4app erstellt wurde sie müssen nur ihre typen im dashboard erstellen und basierend auf dem generierten schema konsumieren im nächsten abschnitt werden wir erklären, wie man dieses schema im frontend behandelt und wie man ihre umgebung vorbereitet, um relay zu verwenden wir haben auch ein graphql kochbuch https //www back4app com/docs/parse graphql/graphql getting started , das sie verwenden können, um ihnen zu helfen, weitere konzepte in unserem dashboard zu verstehen