Relay für aktuelle Benutzerinformationen in React Native nutzen

11 min

aktuellen benutzer mit relay für eine react native app abrufen einführung nachdem sie die benutzerregistrierung und den login in ihrer react native app mit relay implementiert haben, müssen sie die daten des aktuell angemeldeten benutzers abrufen, um verschiedene aktionen und anfragen durchzuführen in diesem leitfaden werden wir dem https //www back4app com/docs/parse graphql/graphql get current user und dem https //www back4app com/docs/react native/graphql/relay query renderer folgen, um informationen über den aktuellen benutzer abzurufen die abfrage wird in graphql wie folgt dargestellt 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } zu jeder zeit können sie auf dieses projekt über unsere github repositories zugreifen, um die stile und den vollständigen code zu überprüfen https //github com/templates back4app/react native graphql relay js users ziel erstellen sie eine komponente, um informationen über den aktuellen benutzer zu erhalten voraussetzungen eine app, die bei back4app mit der parse server version 3 10 oder höher erstellt wurde sie müssen das https //www back4app com/docs/react native/graphql/relay setup sie müssen das https //www back4app com/docs/react native/graphql/users/react native login sample sie müssen das https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr für dieses tutorial verwenden wir expo als react native framework; für dieses tutorial verwenden wir javascript als unsere standardimplementierungssprache; zu jeder zeit können sie auf dieses projekt über unsere github repositories zugreifen, um die stile und den vollständigen code zu überprüfen https //github com/templates back4app/react native graphql relay js users 1 erstellen der user logged komponente im signin komponentenordner erstellen sie eine neue datei und benennen sie sie userloggedrenderer js userloggedrenderer js innerhalb von userloggedrenderer js userloggedrenderer js , lassen sie uns eine komponente erstellen, die der query renderer tutorial sehr ähnlich ist, aber in diesem fall wird nur der query renderer benötigt mit einem gültigen sitzungstoken in der anwendung wird die komponente aufgerufen und erhält die aktuellen benutzerinformationen die query renderer komponente wird wie folgt aussehen 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 ); das erste @todo sollte mit der abfrage implementiert werden, um die informationen des angemeldeten benutzers abzurufen die für diesen vorgang verwendete abfrage ist in 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	 das zweite @todo sollte mit einer funktion implementiert werden, die die informationen über den benutzer nur dann rendert, wenn sie vorhanden sind wenn es keinen fehler gibt, werden wir die rendercontent rendercontent funktion zurückgeben, die unten beschrieben ist die funktion wird die aktuellen benutzerinformationen (e mail und benutzername) auf sichere weise rendern 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 }; sie sollten die funktion vor der queryrenderer komponente implementieren das endergebnis der komponente sollte so aussehen 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 importieren des userloggedrenderer in die signin komponente gehen sie zurück zur formsignin komponente und ersetzen sie den code, der die aktuellen benutzerinformationen zurückgibt, durch die neue benutzer angemeldet komponente von 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 } zu 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } vergessen sie nicht, den userloggedrenderer userloggedrenderer 1 import userloggedrenderer from ' /userloggedrenderer'; führen sie jetzt den yarn relay yarn relay befehl aus, um mit der neuen abfrage zu aktualisieren yarn relay yarn relay jetzt wird der benutzername oder die e mail mit einem gültigen sitzungstoken angezeigt andernfalls sollte die komponente nicht gerendert werden und der login wird ausgeführt außerdem kann der usestate userlogged userlogged aus dem code entfernt werden, da er keinen sinn mehr macht vergessen sie nicht, es aus der oncompleted funktion in der login mutation zu entfernen fazit das endergebnis dieses schrittes sollte dasselbe sein wie das letzte die informationen darüber werden angezeigt, aber jetzt gefolgt von einem benutzernamen oder einer e mail im nächsten dokument lassen sie uns einen button erstellen, um diesen benutzer abzumelden und die sitzung zu bereinigen, sodass die app für den login oder registrierungsfluss zurückkehrt