Configurazione di Relay in React Native e GraphQL

impostazione di relay introduzione nella nostra guida precedente, abbiamo imparato come ottenere il file di schema, salvarlo e incollarlo nella nostra applicazione react native in questa guida, installeremo relay e prepareremo il nostro ambiente per iniziare a sviluppare un'applicazione react native obiettivo per impostare relay, dovremo prima installare relay nella nostra applicazione react native e poi preparare l'ambiente relay prerequisiti consigliamo una comprensione di base dei seguenti argomenti relay modern , babel js , javascript (ecs5 ed ecs6), graphql js readme un progetto react native di base in esecuzione nel tuo ambiente locale un file schema graphql scaricato nel tuo progetto react native nei passaggi seguenti troverai un'installazione di base di relay focalizzata su un'applicazione react native se desideri approfondire questo argomento, visita la documentazione ufficiale 1 installazione dell'api ufficiale di react relay iniziamo a installare la libreria ufficiale react relay questa libreria è l'api ufficiale del relay core team e ha tutto il necessario per costruire i frammenti di dati importante installare relay modern per questo tutorial con la versione 10 0 0 dalla versione 11 0 0 l'approccio per utilizzare react relay è diverso a causa dei nuovi hook 2 configurazione di relay la configurazione di relay contiene le informazioni necessarie per il relay compiler all'interno, specificheremo dove il relay compiler può trovare il file schema file, quali cartelle devono essere cercate e altre configurazioni iniziamo installando il pacchetto relay config nota questo tutorial utilizza yarn come client per i pacchetti, ma puoi usare npm comunque ora creiamo il file di configurazione di relay dove relay troverà il percorso dello schema crea un nuovo file all'interno della radice dell'applicazione nominalo come relay config js apri il file e salvalo con le informazioni qui sotto 3 plugin babel relay per convertire gli artefatti graphql a runtime, dobbiamo installare un plugin babel ora, all'interno del tuo file di configurazione babel, devi aggiungere nell'array dei plugin il plugin babel relay il file finale babel config js apparirà così nei progetti expo segui lo stesso approccio aggiungendo l'array dei plugin all'interno di babel config js subito dopo l'array dei preset il risultato finale dovrebbe apparire 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 }; il plugin relay deve essere eseguito prima di altri plugin per una corretta trasformazione degli artefatti graphql controlla la documentazione del plugin babel per saperne di più 4 compilatore relay dalla nostra prima documentazione, abbiamo spiegato il compilatore relay per far sì che la nostra applicazione compili i nostri frammenti di dati, lo installeremo ora apriamo il nostro package json e configuriamo un nuovo comando script per eseguire il compilatore relay watchman è responsabile della configurazione di se il compilatore relay deve cercare eventuali modifiche ai frammenti relay se è vero, verrà rieseguito ad ogni modifica se è falso, verrà eseguito dopo che esegui il yarn relay da solo il file package json dovrebbe apparire così 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 esegui yarn relay infine, completati i passaggi di installazione, possiamo eseguire il comando yarn relay nella radice dell'applicazione poiché non costruiamo alcun frammento di dati, il relay compiler restituisce qualsiasi file modificato bene, la tua applicazione ha già installato e configurato il relay ora, implementiamo il nostro ambiente per iniziare a fare richieste al server back4app 6 preparare l'ambiente di fetch l'ambiente relay definisce come il livello di rete gestirà le richieste e come il relay store deve funzionare lo store controlla i nostri dati sul frontend aggiornandoli solo quando cambiano e memorizzandoli nella cache un ambiente semplice avrà bisogno almeno del livello di rete e dello store livello di rete il livello di rete è facile da costruire gestirà ogni richiesta della nostra applicazione, effettuando query, mutazioni e sottoscrizioni (se la tua applicazione lo supporta) consumandolo, il relay saprà come preparare le chiamate per accedere al server dell'applicazione negozio relay il negozio è responsabile dell'aggiornamento dei dati della nostra applicazione sul lato client ogni richiesta può avere una funzione di aggiornamento all'interno della funzione di aggiornamento, puoi utilizzare un elenco di funzioni di supporto per aggiornare i tuoi dati con l'interfaccia del negozio per preparare l'ambiente relay, dobbiamo creare un file di configurazione dell'ambiente il file sarà letto dal query renderer ogni volta che viene eseguita una query prepariamo questo file 6 1 crea il file di ambiente seguirà il principio di design della libreria relay, il concetto di collocazione per iniziare, creiamo una cartella nella radice dell'applicazione e chiamala relay all'interno, crea un file e chiamalo environment js environment js 6 2 configura l'ambiente dopo di che, importa da relay runtime relay runtime tutto ciò di cui abbiamo bisogno 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 configura il livello di rete il livello di rete ha bisogno di una funzione per recuperare i dati dal server prima di tutto, creiamo una funzione di fetch responsabile di eseguire una richiesta post 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 }; avvolgiamo la richiesta per il backend con un try catch se si verifica un errore, verrà sollevato e l'applicazione lo gestirà altrimenti seguirà il comportamento normale e restituirà i dati nel livello di rete è anche dove configuri la connessione con il server dell'applicazione su back4app utilizziamo due chiavi principali application id e client key le chiavi devono essere indicate negli header insieme all'url del server per ottenere queste informazioni vai alla tua app e clicca su api console > menu graphql con la console graphql aperta, vedrai l'url in alto e in basso le chiavi dell'applicazione necessarie sostituisci con le tue informazioni la funzione di fetch ricorda di non esporre la chiave master 6 4 esporta l'ambiente il relay runtime fornisce le funzioni necessarie per consumare il network layer e crea lo store infine, combiniamoli in un nuovo ambiente ed esportiamolo nella nostra applicazione usa il codice qui sotto nel tuo file ambiente 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; il file finale dell'ambiente avrà questo aspetto 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; conclusione fantastico ora che il relay e l'ambiente relay sono installati e configurati, è tempo di iniziare a consumare l'api graphql di back4app quindi, il prossimo passo è creare il nostro primo query renderer e comunicarlo al nostro server