Guida Tecnica al Query Renderer su Back4App con Relay

30 min

query renderer su back4app introduzione nella nostra precedente guida , abbiamo imparato come preparare il nostro ambiente relay ora sei pronto per iniziare a sviluppare la tua app react native in questa guida, imparerai come effettuare la tua prima query su back4app ci immergeremo nel relay query render, comprendendo i suoi principi principali e utilizzandolo per consumare i tuoi primi dati da back4app obiettivi ottenere una panoramica del relay query renderer; effettuare una query sull'api graphql di back4app da un'app react native utilizzando relay; prerequisiti applicazione creata nel dashboard di back4app applicazione react native e con ambiente relay configurato secondo la documentazione precedente leggi su relay node e connections cos'è il query renderer? così come react costruisce un albero di componenti, relay costruisce un albero di componenti dati questo significa che ogni componente dell'applicazione sarà il proprietario dei propri dati di frammento il frammento conterrà le informazioni necessarie per renderizzarlo sullo schermo e relay garantisce che questi dati siano disponibili prima di renderizzare il componente gestendo tutto questo approccio, il query renderer è un componente radice necessario per comporre quei frammenti e preparare la query da recuperare dal nostro back end perché comprendere il query renderer? comprendere l'uso del query renderer è importante per astrarre la tua applicazione in modi diversi una buona astrazione del codice potrebbe prevenire ore di lavoro, errori, tempo di debug, ecc come funziona il renderer insieme alle api di back4app nell'ultimo tutorial, abbiamo preparato il file dell'ambiente relay, che specifica le informazioni di connessione a back4app utilizzando questa configurazione, relay si occuperà della comunicazione con le api di back4app non devi preoccuparti della connessione concentrati solo sulla costruzione dei componenti dati 1 creare una classe nel dashboard di back4app creiamo la tua prima classe e popoliamola con alcuni oggetti utilizzando la console graphql di back4app la classe person ha 2 campi name, che è una stringa, e salary, che è un intero vai su dashboard >core >console graphql e usa il codice qui sotto 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 } vedrai il risultato qui sotto creare classe ora creiamo alcuni oggetti all'interno di questa classe vai alla mutazione di creazione oggetto guida https //www back4app com/docs/parse graphql/graphql mutation create object#mutation generic , e vedi come gestire questo caso assicurati di utilizzare l'ultima versione di parse server per poter utilizzare la notazione api graphql più recente disponibile su back4app 1 mutation createobject{ 2 createhero(input {fields {name "allana foley", salary 1000}}){ 3 person { 4 id 5 name 6 salary 7 } 8 } 9 } creazione dell'oggetto ora, la classe person è stata creata e ha un campo nome e stipendio dopo aver creato una nuova classe, back4app genera automaticamente tutte le risorse necessarie per utilizzare il back end in modo sicuro un esempio è l'elenco degli oggetti back4app ha già creato le connessioni necessarie per interrogare l'elenco delle persone persone per capire meglio, vai al playground, aggiorna e apri la scheda documenti e cerca persone back4app ha generato il campo di connessione puoi anche interrogare la classe persona come un elenco nota che il campo query people è un personconnection relay consumerà il campo di connessione per rendere un elenco degli oggetti della persona documento del campo persona e la documentazione del campo di connessione persone (persona) 2 aggiornamento dello schema è importante ricordare che se una nuova classe entra nella tua applicazione, sarà necessario aggiornare lo schema all'interno della radice dell'applicazione react native se necessario, vai a scarica schema documenti e ripeti i passaggi per aggiornare lo schema 3 primo esempio di contenitore di frammenti prima di continuare il tutorial, ti presentiamo il contenitore di frammenti creiamo un componente che sarà il proprietario delle informazioni sulla persona questo componente conterrà il nome e lo stipendio della persona qui puoi chiedere qualsiasi campo della persona per costruire il tuo componente ora, procederemo con questi due campi crea un file e chiamalo personcard js personcard js all'interno di esso, creiamo un semplice componente funzione 1 import react from 'react'; 2	 3 const personcard = () => { 4 return ( 5 \<div> 6 7 \</div> 8 ); 9 }; sostituisci la riga di export default con il codice qui sotto 1 export default createfragmentcontainer(personcard, { 2 person graphql` 3 fragment personcard person on person { 4 id 5 name 6 salary 7 } 8 `, 9 }); il codice sopra creerà un frammento di una persona che richiede solo id, nome e stipendio completa l'aggiornamento del resto del componente con il seguente codice 1 const personcard = ({person}) => { 2 return ( 3 \<view> 4 \<text>name {person name}\</text> 5 \<text>salary {person salary}\</text> 6 \</view> 7 ); 8 }; il risultato finale dovrebbe apparire così 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 creazione del query renderer il passo successivo è creare il query renderer per la tua lista di oggetti il query renderer è un componente radice per recuperare i componenti di dati e prepararli per recuperare dati dal backend imparerai come recuperare dati per una classe person su back4app 4 1 creazione del file crea un nuovo file e chiamalo personrenderer js personrenderer js copia il codice qui sotto e incollalo nel file personrenderer 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 comprendere le proprietà di queryrenderer iniziamo con un query renderer con le loro proprietà vuote graphql, variabili e render passo dopo passo, implementerai ciascuna in modo incrementale prima di tutto, la tua applicazione deve informare la query per query renderer qui, la nostra applicazione consumerà un elenco di persone nelle proprietà della query, incolla il seguente codice 1 graphql` 2 query personrendererquery { 3 people { 4 edges { 5 node { 6 personcard person 7 } 8 } 9 } 10 }` il graphql proviene da react relay e implementa la query come una stringa è importante comprendere le connessioni tra edges e node la query sopra sta consumando una connessione di nodi di persone dal server back4app ogni volta che crei una nuova classe, sarà seguita da una connessione di nodi variabili quando necessario, il query renderer consumerà variabili un buon esempio quando l'applicazione richiede una query per una persona per id poiché questo non è il caso in questo momento, passeremo a null nelle proprietà delle variabili popolando la scheda persona questa query restituirà un elenco di persone il query renderer garantisce che i dati saranno disponibili per il rendering se non lo sono, verrà generato un errore le proprietà responsabili di questo sono il render popola le proprietà di render con il seguente codice 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 }} sostituisci il todo commentato con una mappa javascript per il rendering di una scheda persona per ogni risultato dall'elenco come detto, il query renderer si assume la responsabilità di rendere i dati disponibili solo quando sono pronti fino ad allora, verrà visualizzato un messaggio di caricamento se si verifica un errore, verrà visualizzato sullo schermo impedendo un arresto anomalo inatteso dell'applicazione infine, miglioriamo il rendering delle persone sostituendo il map con una nuova funzione mettila prima del query renderer 1 const renderpersons = (people) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; e il risultato finale dovrebbe apparire così 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 fare la tua prima query ora è il momento di recuperare la persona utilizzando il personrenderer se tutto va bene, la tua applicazione ha ora due nuovi componenti personrenderer e personcard prima di avviare l'applicazione, il relay ha bisogno del relay compiler per funzionare e generare i tipi di componente per questo, esegui nel tuo terminale in app js aggiungi il seguente codice 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; il codice di app js proviene originariamente da create react native app ha aggiunto una view con uno stile per centrare il contenuto sullo schermo con un margine di 10px dall'alto all'interno ha un testo con un'etichetta per dare un contesto alla stampa e il personrenderer per mostrare la lista delle persone devi ottenere il seguente risultato rendering nella nostra applicazione back4app react native, importiamo direttamente il personrenderer in app js app js poiché il personrenderer è un componente radice e ha il suo queryrenderer, la persona deve essere visualizzata senza alcun errore 6 digitare i componenti questo passaggio ha senso per un'applicazione che lavora con typescript se la tua applicazione non utilizza typescript, procedi pure uno dei poteri del relay compiler è generare i tipi da ciascun componente dati tipizziamo il personrenderer e il personcard per rendere l'applicazione più potente digitazione personrenderer digita l'argomento della funzione renderperson people people nel personrenderer 1 const renderpersons = (people personrendererquery\['response']\['people']) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; importa il personrendererquery personrendererquery tipo da generated generated cartella creata all'interno della stessa cartella del personrenderer digitazione personcard procedi con personcard, crea un nuovo oggetto tipo e chiamalo personcardprops 1 type personcardprops = {}; importa il personcard person personcard person tipo da generated generated cartelle 1 import {personcard person} from ' / generated /personcard person graphql'; aggiungi la persona all'interno del tipo personcardprops 1 type personcardprops = { 2 person personcard person; 3 }; sugli argomenti delle props da personcard, digita il componente con il personcardprops personcardprops il risultato finale di entrambi i componenti dovrebbe apparire così 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 }); conclusione il risultato finale di queryrenderer ha dimostrato come l'applicazione possa essere astratta l'applicazione può visualizzare la persona all'interno del query renderer poiché personcard ha più componenti, non cambia il modo in cui è stato costruito il query renderer il personrenderer è stato costruito per mostrare come una query possa essere eseguita in passaggi semplici, combinata con la potenza del server back4app nella prossima guida, imparerai come recuperare un oggetto persona specifico e mostrare i suoi attributi