Query Renderer für GraphQL API mit Relay einrichten

30 min

abfrage renderer auf back4app einführung in unserem vorherigen leitfaden , haben wir gelernt, wie man unsere relay umgebung vorbereitet jetzt sind sie bereit, ihre react native app zu entwickeln in diesem leitfaden lernen sie, wie sie ihre erste abfrage auf back4app durchführen wir werden in den relay query renderer eintauchen, seine hauptprinzipien verstehen und ihn verwenden, um ihre ersten daten von back4app abzurufen ziele einen überblick über den relay query renderer erhalten; eine abfrage über die back4app graphql api von einer react native app aus mit relay durchführen; voraussetzungen anwendung, die im back4app dashboard erstellt wurde react native anwendung mit der in den vorherigen dokumenten konfigurierten relay umgebung lesen sie über relay node und verbindungen was ist der query renderer? so wie react einen baum von komponenten erstellt, erstellt relay einen baum von datenkomponenten das bedeutet, dass jede komponente der anwendung der eigentümer ihrer fragmentdaten sein wird das fragment enthält die dateninformationen, die erforderlich sind, um es auf dem bildschirm darzustellen, und relay stellt sicher, dass diese daten verfügbar sind, bevor die komponente gerendert wird im umgang mit diesem gesamten ansatz ist der query renderer eine wurzelkomponente, die notwendig ist, um diese fragmente zusammenzustellen und die abfrage vorzubereiten, die von unserem backend abgerufen werden soll warum den query renderer verstehen? das verständnis der verwendung des query renderers ist wichtig, um ihre anwendung auf verschiedene weise zu abstrahieren eine gute abstraktion des codes könnte stunden an arbeit, fehlern, debugging zeit usw verhindern wie der renderer zusammen mit den back4app apis funktioniert im letzten tutorial haben wir die relay umgebungsdatei vorbereitet, die die verbindungsinformationen für back4app angibt mit dieser konfiguration kümmert sich relay um die kommunikation mit den back4app apis sie müssen sich keine gedanken über die verbindung machen konzentrieren sie sich einfach darauf, die datenkomponenten zu erstellen 1 erstellen einer klasse im back4app dashboard lassen sie uns ihre erste klasse erstellen und sie mit ein paar objekten über die back4app graphql konsole füllen die klasse person hat 2 felder name, das ein string ist, und salary, das eine ganzzahl ist gehen sie zu dashboard >core >graphql konsole und verwenden sie den folgenden code 1 mutation createclass { 2 createclass(input { 3 name "person" 4 schemafields { 5 addstrings \[{name "name"}] 6 addnumbers \[{name "salary"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } sie werden das ergebnis unten sehen klasse erstellen lass uns jetzt einige objekte innerhalb dieser klasse erstellen gehe zur erstellungsobjekt mutation anleitung https //www back4app com/docs/parse graphql/graphql mutation create object#mutation generic , um zu sehen, wie man diesen fall behandelt stelle sicher, dass du die neueste parse server version verwendest, um die aktuellste graphql api notation auf back4app nutzen zu können 1 mutation createobject{ 2 createhero(input {fields {name "allana foley", salary 1000}}){ 3 person { 4 id 5 name 6 salary 7 } 8 } 9 } objekt erstellen jetzt wurde die person klasse erstellt und hat ein name und ein gehaltsfeld nach der erstellung einer neuen klasse generiert back4app automatisch alle notwendigen ressourcen, um das backend sicher zu nutzen ein beispiel ist die liste der objekte back4app hat bereits die notwendigen verbindungen erstellt, um die liste der personen abzufragen menschen um es besser zu verstehen, gehe zum playground, aktualisiere und öffne den reiter dokumentation und suche nach menschen back4app hat das verbindungsfeld generiert du kannst auch die klasse person als liste abfragen beachte, dass das query people feld eine personconnection ist relay wird das verbindungsfeld verwenden, um eine liste der objekte der person darzustellen dokument zum personenfeld und die dokumentation zum verbindungsfeld menschen (person) 2 aktualisierung des schemas es ist wichtig zu beachten, dass, wenn eine neue klasse in deine anwendung eingefügt wird, es notwendig sein wird, das schema im wurzelverzeichnis der react native anwendung zu aktualisieren falls erforderlich, gehe zu schema herunterladen dokumentation und wiederhole die schritte zur aktualisierung des schemas 3 erstes beispiel eines fragmentcontainers bevor wir mit dem tutorial fortfahren, lass uns den fragmentcontainer vorstellen lass uns eine komponente erstellen, die der besitzer der personeninformationen sein wird diese komponente wird den namen und das gehalt der person enthalten hier kannst du jedes personenfeld anfragen, um deine komponente zu erstellen jetzt werden wir mit diesen beiden feldern fortfahren erstelle eine datei und nenne sie personcard js personcard js erstelle darin eine einfache funktionskomponente 1 import react from 'react'; 2	 3 const personcard = () => { 4 return ( 5 \<div> 6 7 \</div> 8 ); 9 }; ersetzen sie die zeile export default durch den folgenden code 1 export default createfragmentcontainer(personcard, { 2 person graphql` 3 fragment personcard person on person { 4 id 5 name 6 salary 7 } 8 `, 9 }); der obige code erstellt ein fragment einer person, das nur nach id, name und salary fragt vervollständigen sie die aktualisierung des restlichen components mit dem folgenden code 1 const personcard = ({person}) => { 2 return ( 3 \<view> 4 \<text>name {person name}\</text> 5 \<text>salary {person salary}\</text> 6 \</view> 7 ); 8 }; das endergebnis sollte so aussehen 1 import react from "react"; 2 import { createfragmentcontainer, graphql } from "react relay"; 3 import { view, text } from "react native"; 4	 5 const personcard = ({person}) => { 6 return ( 7 \<view> 8 \<text>name {person name}\</text> 9 \<text>salary {person salary}\</text> 10 \</view> 11 ); 12 }; 13	 14 export default createfragmentcontainer(personcard, { 15 person graphql` 16 fragment personcard person on person { 17 id 18 name 19 salary 20 } 21 `, 22 }); 4 erstellen des query renderers der nächste schritt besteht darin, den query renderer für ihre objektliste zu erstellen der query renderer ist eine wurzelkomponente zum abrufen der datenkomponenten und zur vorbereitung des abrufs von daten vom backend sie werden lernen, wie sie daten für eine person klasse auf back4app abrufen 4 1 erstellen der datei erstellen sie eine neue datei und benennen sie sie personrenderer js personrenderer js kopieren sie den untenstehenden code und fügen sie ihn in die personrenderer datei ein 1 const personrenderer = () => { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql``} 6 variables={null} 7 render={({error, props}) => { 8 if (error) { 9 return ( 10 \<view> 11 \<text>{error message}\</text> 12 \</view> 13 ); 14 } else if (props) { 15 // @todo here will be implement the person card for each item from result 16 } 17 return ( 18 \<view> 19 \<text>loading\</text> 20 \</view> 21 ); 22 }} 23 /> 24 ); 25 }; 26	 27 export default personrenderer; 4 2 verständnis der props von queryrenderer lass uns mit einem query renderer beginnen, dessen props leer sind graphql, variables und render schritt für schritt wirst du jeden einzelnen schrittweise implementieren zunächst muss deine anwendung die abfrage für den query renderer angeben hier wird unsere anwendung eine liste von personen konsumieren füge im abfrage props den folgenden code ein 1 graphql` 2 query personrendererquery { 3 people { 4 edges { 5 node { 6 personcard person 7 } 8 } 9 } 10 }` das graphql kommt von react relay und implementiert die abfrage als string es ist wichtig, die verbindungen von edges und nodes zu verstehen die obige abfrage konsumiert eine node verbindung von personen vom back4app server jedes mal, wenn du eine neue klasse erstellst, wird sie von einer node verbindung gefolgt variablen wenn nötig, wird der query renderer variablen konsumieren ein gutes beispiel wenn die anwendung eine abfrage für eine person nach id anfordert da dies im moment nicht der fall ist, lassen wir die variablen props auf null die personenkarten befüllen diese abfrage wird eine liste von personen zurückgeben der query renderer stellt sicher, dass die daten verfügbar sind, um gerendert zu werden wenn nicht, wird ein fehler angezeigt die props, die dafür verantwortlich sind, sind die render props befülle die render props mit dem folgenden code 1 render={({error, props}) => { 2 if (error) { 3 return ( 4 \<view> 5 \<text>{error message}\</text> 6 \</view> 7 ); 8 } else if (props) { 9 return props people edges map(({node}) => \<personcard person={node} />); 10 } 11 return ( 12 \<view> 13 \<text>loading\</text> 14 \</view> 15 ); 16 }} ersetze das kommentierte todo durch eine javascript map, um eine personenkarten für jedes ergebnis aus der liste zu rendern wie gesagt, der query renderer übernimmt die verantwortung dafür, die daten nur dann verfügbar zu machen, wenn sie bereit sind bis dahin wird eine ladeanzeige angezeigt wenn ein fehler auftritt, wird dieser auf dem bildschirm angezeigt, um einen unerwarteten absturz der anwendung zu verhindern zuletzt lassen sie die darstellung der personen verbessern, indem sie map durch eine neue funktion ersetzen setzen sie es vor den query renderer 1 const renderpersons = (people) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; und das endergebnis sollte so aussehen 1 import react from "react"; 2 import { queryrenderer } from "react relay"; 3 import environment from " /relay/environment"; 4 import personcard from " /personcard"; 5 import { view, text } from "react native"; 6	 7 const personrenderer = () => { 8 const renderpersons = (people) => { 9 return people edges map(({node}) => \<personcard person={node} />); 10 }; 11	 12 return ( 13 \<queryrenderer 14 environment={environment} 15 query={graphql` 16 query personrendererquery { 17 people { 18 edges { 19 node { 20 personcard person 21 } 22 } 23 } 24 } 25 `} 26 variables={null} 27 render={({error, props}) => { 28 if (error) { 29 return ( 30 \<view> 31 \<text>{error message}\</text> 32 \</view> 33 ); 34 } else if (props) { 35 return renderpersons(props people); 36 } 37 return ( 38 \<view> 39 \<text>loading\</text> 40 \</view> 41 ); 42 }} 43 /> 44 ); 45 }; 46	 47 export default personrenderer; 5 ihre erste abfrage erstellen jetzt ist es zeit, die person mit dem personrenderer abzurufen wenn alles in ordnung ist, hat ihre anwendung jetzt zwei neue komponenten personrenderer und personcard bevor sie die anwendung starten, benötigt relay den relay compiler, um zu laufen und die komponententypen zu generieren führen sie dazu in ihrem terminal aus fügen sie in app js den folgenden code hinzu 1 import react from 'react'; 2 import { safeareaview, statusbar, view, text } from 'react native'; 3	 4 import providers from ' /providers'; 5 import personrenderer from ' /components/home/person/personrenderer'; 6	 7 const app = () => { 8 return ( 9 \<providers> 10 \<statusbar barstyle="dark content" /> 11 \<safeareaview> 12 \<view 13 style={ { 14 flexdirection 'column', 15 justifycontent 'center', 16 alignitems 'center', 17 margintop 100, 18 } }> 19 \<text style={ {fontweight "bold", textalign "center"} }> 20 back4app react native relay query renderer list example 21 \</text> 22 \<personrenderer /> 23 \</view> 24 \</safeareaview> 25 \</providers> 26 ); 27 }; 28	 29 export default app; der code von app js stammt ursprünglich von create react native app er fügte eine view mit einem stil hinzu, um den inhalt auf dem bildschirm mit einem abstand von 10px von oben zu zentrieren darin befindet sich ein text mit einem label, um etwas kontext für den druck zu geben, und der personrenderer, um die liste der personen anzuzeigen sie müssen das folgende ergebnis erzielen rendering in unserer back4app react native anwendung importieren wir den personrenderer direkt in die app js app js da der personrenderer eine wurzelkomponente ist und seinen eigenen queryrenderer hat, muss die person ohne fehler angezeigt werden 6 typisierung der komponenten dieser schritt macht sinn für eine anwendung, die mit typescript arbeitet wenn ihre anwendung kein typescript verwendet, machen sie einfach weiter eine der stärken des relay compilers ist es, die typen aus jeder datenkomponente zu generieren lassen sie uns den personrenderer und die personcard typisieren, um die anwendung leistungsfähiger zu machen typisierung des personrenderer typisieren sie das argument der renderperson funktion people people in den personrenderer 1 const renderpersons = (people personrendererquery\['response']\['people']) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; importieren sie den personrendererquery personrendererquery typ aus dem generated generated ordner, der im selben ordner wie der personrenderer erstellt wurde typisierung der personcard gehen sie zur personcard, erstellen sie ein neues typobjekt und benennen sie es personcardprops 1 type personcardprops = {}; importieren sie den personcard person personcard person typ aus den generated generated ordnern 1 import {personcard person} from ' / generated /personcard person graphql'; fügen sie die person innerhalb des typs personcardprops hinzu 1 type personcardprops = { 2 person personcard person; 3 }; typisieren sie die komponente mit den props argumenten von personcard mit dem personcardprops personcardprops das endergebnis beider komponenten sollte so aussehen personrenderer 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import {environment} from ' / / /relay'; 4 import personcard from ' /personcard'; 5 import {view, text} from 'react native'; 6 import {personrendererquery} from ' / generated /personrendererquery graphql'; 7	 8 const personrenderer = () => { 9 const renderpersons = (people personrendererquery\['response']\['people']) => { 10 return people edges map(({node}) => \<personcard person={node} />); 11 }; 12	 13 return ( 14 \<queryrenderer 15 environment={environment} 16 query={graphql` 17 query personrendererquery { 18 people { 19 edges { 20 node { 21 personcard person 22 } 23 } 24 } 25 } 26 `} 27 variables={null} 28 render={({error, props}) => { 29 if (error) { 30 return ( 31 \<view> 32 \<text>{error message}\</text> 33 \</view> 34 ); 35 } else if (props) { 36 return renderpersons(props people); 37 } 38 return ( 39 \<view> 40 \<text>loading\</text> 41 \</view> 42 ); 43 }} 44 /> 45 ); 46 }; 47	 48 export default personrenderer; personcard 1 import react from 'react'; 2	 3 import {createfragmentcontainer, graphql} from 'react relay'; 4	 5 import {view, text} from 'react native'; 6 import {personcard person} from ' / generated /personcard person graphql'; 7	 8 type personcardprops = { 9 person personcard person; 10 }; 11	 12 const personcard = ({person} personcardprops) => { 13 return ( 14 \<view> 15 \<text>name {person name}\</text> 16 \<text>salary {person salary}\</text> 17 \</view> 18 ); 19 }; 20	 21 export default createfragmentcontainer(personcard, { 22 person graphql` 23 fragment personcard person on person { 24 id 25 name 26 salary 27 } 28 `, 29 }); fazit das endergebnis des queryrenderers zeigte, wie die anwendung abstrahiert werden kann die anwendung kann die person im query renderer anzeigen da die personcard mehr komponenten hat, ändert sich nicht die art und weise, wie der query renderer aufgebaut wurde der personrenderer wurde entwickelt, um zu zeigen, wie eine abfrage in einfachen schritten durchgeführt werden kann, kombiniert mit der leistungsfähigkeit des back4app servers im nächsten leitfaden lernen sie, wie sie ein bestimmtes person objekt abrufen und deren attribute anzeigen