Query dell'utente corrente in React Native con Relay

11 min

ottieni l'utente corrente utilizzando relay per un'app react native introduzione dopo aver implementato la registrazione e il login dell'utente nella tua app react native utilizzando relay, devi recuperare i dati dell'utente attualmente connesso per eseguire diverse azioni e richieste in questa guida seguiremo il guida al cookbook graphql per ottenere l'utente connesso https //www back4app com/docs/parse graphql/graphql get current user e il query renderer https //www back4app com/docs/react native/graphql/relay query renderer per recuperare informazioni sull'utente corrente la query come graphql è rappresentata come 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } in qualsiasi momento, puoi accedere a questo progetto tramite i nostri repository github per controllare gli stili e il codice completo repository di esempio javascript obiettivo crea un componente per ottenere informazioni sull'utente attuale prerequisiti un'app creata su back4app utilizzando la versione 3 10 o superiore di parse server devi concludere il tutorial di configurazione dell'ambiente relay devi concludere il esempio di login react native utilizzando relay devi concludere il utente react native loggato per questo tutorial utilizzeremo expo come framework react native; per questo tutorial utilizzeremo javascript come nostro linguaggio di implementazione predefinito; in qualsiasi momento, puoi accedere a questo progetto tramite i nostri repository github per controllare gli stili e il codice completo repository di esempio javascript 1 creazione del componente utente loggato nella cartella del componente signin crea un nuovo file e chiamalo userloggedrenderer js userloggedrenderer js all'interno di userloggedrenderer js userloggedrenderer js , creiamo un componente molto simile al tutorial del query renderer, ma in questo caso è necessario solo il query renderer con un token di sessione valido nell'applicazione, il componente verrà chiamato e otterrà le informazioni dell'utente attuale il componente query renderer avrà un aspetto simile al seguente 1 return ( 2 \<queryrenderer 3 environment={environment} 4 query={// @todo implement the query necessary} 5 variables={null} 6 render={({error, props}) => { 7 if (error) { 8 return ( 9 \<view> 10 \<text>{error message}\</text> 11 \</view> 12 ); 13 } else if (props) { 14 // @todo implement a funcion to render the viewer 15 } 16 return ( 17 \<view> 18 \<text>loading\</text> 19 \</view> 20 ); 21 }} 22 /> 23 ); il primo @todo dovrebbe essere implementato con la query per recuperare le informazioni dall'utente loggato la query utilizzata per questa operazione è descritta in guida al graphql cookbook per ottenere l'utente loggato https //www back4app com/docs/parse graphql/graphql get current user 1 graphql` 2 query userloggedrendererquery { 3 viewer { 4 user { 5 id 6 createdat 7 updatedat 8 username 9 } 10 sessiontoken 11 } 12 } 13	 il secondo @todo dovrebbe essere implementato con una funzione che visualizzerà le informazioni sull'utente solo se esistono se non ci sono errori, restituiremo la rendercontent rendercontent funzione descritta di seguito la funzione visualizzerà le informazioni dell'utente corrente (email e username) in modo sicuro 1 const rendercontent = (viewer) => { 2 if (!viewer? user) { 3 return null; 4 } 5	 6 const {user} = viewer; 7	 8 return ( 9 \<view style={ {margintop 15, alignitems 'center'} }> 10 \<text>user {user? username || user? email} logged\</text> 11 \</view> 12 ); 13 }; dovresti implementare la funzione prima del componente queryrenderer il risultato finale del componente dovrebbe apparire così 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import environment from ' / /relay/environment'; 4 import {text, view} from 'react native'; 5	 6 const userloggedrenderer = () => { 7 const rendercontent = (viewer) => { 8 if (!viewer? user) { 9 return null; 10 } 11	 12 const {user} = viewer; 13	 14 return ( 15 \<view style={ {margintop 15, alignitems 'center'} }> 16 \<text>user {user? username || user? email} logged\</text> 17 \</view> 18 ); 19 }; 20	 21 return ( 22 \<queryrenderer 23 environment={environment} 24 query={graphql` 25 query userloggedrendererquery { 26 viewer { 27 user { 28 id 29 createdat 30 updatedat 31 username 32 } 33 sessiontoken 34 } 35 } 36 `} 37 variables={null} 38 render={({error, props}) => { 39 if (error) { 40 return ( 41 \<view> 42 \<text>{error message}\</text> 43 \</view> 44 ); 45 } else if (props) { 46 return rendercontent(props viewer); 47 } 48 return ( 49 \<view> 50 \<text>loading\</text> 51 \</view> 52 ); 53 }} 54 /> 55 ); 56 }; 57	 58 export default userloggedrenderer; 2 importazione del userloggedrenderer nel componente signin torna nel componente formsignin, sostituisci il codice che restituisce le informazioni dell'utente corrente con il nuovo componente utente connesso da 1 if (sessiontoken) { 2 console warn(sessiontoken); 3 return ( 4 \<view style={ { margintop 15, alignitems 'center' } }> 5 \<text>user logged\</text> 6 \</view> 7 ); 8 } a 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } non dimenticare di importare il userloggedrenderer userloggedrenderer 1 import userloggedrenderer from ' /userloggedrenderer'; ora esegui il comando yarn relay yarn relay per aggiornare con la nuova query yarn relay yarn relay ora verrà visualizzato il nome utente o l'email con un token di sessione valido altrimenti, il componente non dovrebbe essere renderizzato e, il login verrà eseguito inoltre, l'uso di usestate userlogged userlogged può essere rimosso dal codice che non ha più senso non dimenticare di rimuoverlo dalla funzione oncompleted nella mutazione login conclusione il risultato finale di questo passaggio dovrebbe essere lo stesso dell'ultimo le informazioni al riguardo verranno visualizzate ma ora seguite da un nome utente o un'email nel prossimo documento, creiamo un pulsante per disconnettere questo utente e pulire la sessione, riportando l'app per il flusso di login o registrazione