Guida Relay: Schema e Implementazione su Back4App

inizia con graphql relay introduzione in questa guida imparerai cos'è relay, come lavorare con lo schema e capire come lavorare con graphql su back4app requisiti questo non è ancora un tutorial, ma per sentirti a tuo agio nel leggerlo avrai bisogno di conoscenze di base di javascript comprensione di base di graphql se non ce l'hai, il graphql js è un ottimo punto di partenza relay relay è un client graphql sviluppato dal facebook engineering team e progettato per le prestazioni nella creazione di applicazioni basate sui dati più precisamente, relay è un framework per il recupero e la gestione dichiarativa dei dati graphql sul lato client che utilizza convenzioni rigorose per aiutare la tua applicazione a avere successo è stato costruito tenendo a mente la scalabilità per alimentare applicazioni complesse come facebook l'obiettivo finale di graphql e relay è fornire interazioni istantanee con la ui uno dei principali vantaggi dell'utilizzo di graphql è che puoi recuperare con una singola query tutti i dati necessari per costruire una pagina dell'applicazione, ad esempio certo che questo è positivo (puoi risparmiare viaggi di andata e ritorno al server) ma con questo arriva un problema potresti utilizzare query diverse per lo stesso componente quando riutilizzi questo componente in diverse parti della tua applicazione per evitare questo tipo di problema, relay utilizza un concetto importante la colocation colocazione quando si utilizza relay, i componenti e le loro esigenze di dati vivono insieme le esigenze di dati dei componenti sono dichiarate all'interno di essi ciò significa che tutti i componenti dichiarano i dati di cui hanno bisogno relay garantisce che ogni componente abbia i dati di cui ha bisogno quando viene renderizzato la struttura di relay dietro il concetto di colocazione sono i contenitori il più comune è il relay fragment container il contenitore è il componente che cerca di soddisfare i dati richiesti quando viene renderizzato ciascun componente i contenitori dichiarano la loro dipendenza dai dati utilizzando frammenti graphql ogni componente avrà il proprio contenitore di frammenti il contenitore non recupera i dati direttamente; dichiara solo la specifica per i dati necessari quando viene renderizzato i dati verranno recuperati sul lato server relay si assicurerà che i dati siano disponibili prima che avvenga il rendering relay compone un albero di dati con quei contenitori, ignorando le ridondanze e recuperando i dati sul server illustriamo il concetto con un esempio un frammento è una selezione di campi su un tipo graphql relay lavora con frammenti, paginazione e contenitori di refetch il più comune è un contenitore di frammenti vedi di seguito un frammento in graphql e dopo lo stesso in relay 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4&#x9; 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12&#x9; 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20&#x9; 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); nel primo codice puoi vedere la versione graphql che ci consente di suddividere questa query in frammenti riutilizzabili nel codice successivo puoi vedere quello di relay che mostra i frammenti e i dati insieme nello stesso componente la collocazione significa che le definizioni dei dati e le definizioni della vista vivono insieme la collocazione ha alcuni vantaggi dobbiamo solo dichiarare esattamente i dati di cui abbiamo bisogno questo significa che è difficile sovra raccogliere dati, il che migliora la nostra applicazione ed è difficile sotto raccogliere dati, il che previene errori con dati mancanti un altro concetto importante è il mascheramento dei dati, che significa che i componenti possono accedere solo ai dati che hanno richiesto il mascheramento dei dati aiuta a prevenire errori di dipendenza inoltre, i componenti vengono aggiornati solo se i dati che stanno utilizzando cambiano query renderer modern ti consigliamo di dare un'occhiata alla documentazione ufficiale del query renderer https //relay dev/docs/en/query renderer html#docsnav per una migliore comprensione basato sui contenitori di frammenti, relay li leggerà e farà la richiesta al server in base ai dati che hanno ma, come avviene questa richiesta? qui entra in gioco il query renderer modern il query renderer modern è il componente che legge i contenitori di frammenti, fa la richiesta al server e restituisce i dati al componente ogni componente radice avrà un query renderer modern che effettua questa richiesta nell'esempio sopra abbiamo un'astrazione in modo che passiamo solo il frammento che deve essere letto e così tutto il resto del lavoro viene svolto all'interno di createqueryrenderermodern nel prossimo passaggio del documento entreremo nel createqueryrenderermodern per comprendere l'astrazione basata sull'esempio puro sopra di seguito è riportato un esempio puro di 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 } possiamo vedere che il query renderer modern è un componente hoc in altre parole, avvolgi il componente che possiede il contenitore con i dati da richiedere, fai la richiesta con l'ambiente relay e restituisci i dati verso il basso passando al componente generazione automatica dei tipi lavorando con relay possiamo costruire un'applicazione in modo sicuro per i tipi come abbiamo detto, ogni componente sarà il proprietario dei propri dati quindi, quando eseguiamo il relay compiler, legge ogni frammento di dati e fa un controllo con il tuo schema graphql se tutti i controlli del relay compiler sono ok, i tipi verranno generati in una cartella chiamata generated questa cartella viene creata all'interno delle cartelle dei componenti radice vedi l'esempio qui sotto controllo della salute dell'api della home del componente 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8&#x9; 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16&#x9; 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); cartella generata contenente i tipi per il componente home e i tipi generati dopo di questo dobbiamo solo importare il tipo nel componente e comporlo 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; il tipo è generato in flow, il linguaggio principale per i tipi di facebook ma, con una libreria puoi generare in typescript questo è il più comune per lavorare con react native in sintesi, con il compilatore relay possiamo controllare l'implementazione dei dati prima del tempo di esecuzione questo ci aiuta a prevenire bug e quindi migliorare la qualità dell'applicazione e il tempo di sviluppo nelle query, possiamo evitare dati duplicati in n diversi componenti controlla se alcuni dati sono duplicati se ci sono, rimuoverà le ridondanze questo ridurrà la dimensione del payload delle query e aumenterà ulteriormente le prestazioni dell'applicazione sviluppo nelle query, possiamo evitare dati duplicati in n diversi componenti controlla se alcuni dati sono duplicati se ci sono, rimuoverà le ridondanze questo ridurrà la dimensione del payload delle query e aumenterà ulteriormente le prestazioni dell'applicazione sul lato server back4app back4app genera un'api graphql conforme a relay pronta all'uso da utilizzare nel tuo progetto cosa genera back4app per te in modo che tu non debba costruirlo da solo sul lato server infrastruttura nel dashboard di back4app puoi creare un modello di dati completo con classi, tipi e tutto il resto di cui ha bisogno un database non devi preoccuparti di configurare e mantenere il server da solo dopo aver creato il tuo modello di dati, back4app genererà tutto il necessario per consumarlo sul lato frontend utilizzando graphql diamo un'occhiata allo schema api di graphql schema il file di schema è il nucleo di qualsiasi applicazione graphql descrive l'intero server disponibile per essere utilizzato sul lato client relay funziona utilizzando il tuo file di schema per confermare la stringa delle query e il file generato per apparire in / generated /mycomponent graphql, come abbiamo detto nel automatic type generation argomento per utilizzare il relay compiler, hai bisogno di un file di schema graphql graphql o json che descriva l'api del tuo server graphql questi file sono rappresentazioni locali di una fonte di verità del server e non vengono modificati ogni schema di graphql può essere composto da tipo di query, tipo di mutazione e tipo di sottoscrizione per lavorare con uno schema consumato da relay sul frontend, hai bisogno di alcuni concetti fondamentali sul backend interfaccia nodo e connessione ti consigliamo di leggere riguardo all'interfaccia nodo e alle connessioni relay per rendere questa lettura più facile da astrarre interfacce dei nodi l'interfaccia del nodo implementa ogni tipo su graphql per aiutare a recuperare dati tramite id questa è un'implementazione per rendere più facile il recupero dei dati dal server e l'aggiornamento quindi, ogni dato di ogni tipo avrà un id unico, chiamato id unico globale, implementato da un'interfaccia nodo con il nodo, relay evita query annidate e rende il recupero e il ri recupero utilizzandolo questo è difficile da implementare e richiede un po' di lavoro, ma l'abbiamo già costruito per te! paginazione costruito per essere composto, sia sul front end che sul back end, relay ci aiuterà a comporre i nostri dati per lavorare con la paginazione abbiamo connessioni queste connessioni implementano il nodo dal tipo che stiamo recuperando e hanno un modello standard, facilitando l'implementazione della paginazione sul lato server fortunatamente, di nuovo, abbiamo già costruito questo da utilizzare sul frontend conclusione in questa guida abbiamo introdotto cos'è relay, i suoi concetti principali e come funziona inoltre, abbiamo potuto vedere come back4app automatizza la creazione del server graphql e ci fornisce un database completo con api graphql con cui lavorare riassumendo, l'intero backend è già costruito da back4app devi solo creare i tuoi tipi nel dashboard e iniziare a consumare in base allo schema generato nella prossima sezione spiegheremo come gestire questo schema sul front end e come preparare il tuo ambiente per utilizzare relay abbiamo anche un graphql cookbook https //www back4app com/docs/parse graphql/graphql getting started , puoi usarlo per aiutarti a comprendere meglio i concetti nel nostro dashboard