Recherche Utilisateur Actuel avec Relay et React Native

10 min

obtenir l'utilisateur actuel en utilisant relay pour une application react native introduction après avoir mis en œuvre l'enregistrement et la connexion des utilisateurs dans votre application react native en utilisant relay, vous devez récupérer les données de l'utilisateur actuellement connecté pour effectuer différentes actions et requêtes dans ce guide, nous allons suivre le https //www back4app com/docs/parse graphql/graphql get current user et le https //www back4app com/docs/react native/graphql/relay query renderer pour récupérer des informations sur l'utilisateur actuel la requête en tant que graphql est représentée comme suit 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } à tout moment, vous pouvez accéder à ce projet via nos dépôts github pour consulter les styles et le code complet https //github com/templates back4app/react native graphql relay js users objectif créer un composant pour obtenir des informations sur l'utilisateur actuel prérequis une application créée sur back4app utilisant la version 3 10 ou supérieure de parse server vous devez conclure le https //www back4app com/docs/react native/graphql/relay setup vous devez conclure le https //www back4app com/docs/react native/graphql/users/react native login sample vous devez conclure le https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr pour ce tutoriel, nous allons utiliser expo comme framework react native ; pour ce tutoriel, nous allons utiliser javascript comme notre langage d'implémentation par défaut ; à tout moment, vous pouvez accéder à ce projet via nos dépôts github pour consulter les styles et le code complet https //github com/templates back4app/react native graphql relay js users 1 création du composant utilisateur connecté dans le dossier du composant signin, créez un nouveau fichier et nommez le userloggedrenderer js userloggedrenderer js à l'intérieur de userloggedrenderer js userloggedrenderer js , créons un composant très similaire au tutoriel du query renderer, mais dans ce cas, seul le query renderer est nécessaire avec un jeton de session valide dans l'application, le composant sera appelé et obtiendra les informations de l'utilisateur actuel le composant query renderer ressemblera à ce qui suit 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 ); le premier @todo devrait être implémenté avec la requête pour récupérer les informations de l'utilisateur connecté la requête utilisée pour cette opération est décrite dans 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	 le deuxième @todo devrait être implémenté avec une fonction qui rendra les informations sur l'utilisateur uniquement si elles existent s'il n'y a pas d'erreur, nous allons retourner la rendercontent rendercontent fonction décrite ci dessous la fonction affichera les informations de l'utilisateur actuel (email et nom d'utilisateur) de manière sécurisée 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 }; vous devez implémenter la fonction avant le composant queryrenderer le résultat final du composant devrait ressembler à ceci 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 importation du userloggedrenderer dans le composant signin retournez dans le composant formsignin, remplacez le code qui renvoie les informations de l'utilisateur actuel par le nouveau composant utilisateur connecté de 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 } à maintenant exécutez yarn relay yarn relay commande pour mettre à jour avec la nouvelle requête yarn relay yarn relay maintenant, le nom d'utilisateur ou l'email avec un jeton de session valide sera affiché sinon, le composant ne doit pas se rendre et, la connexion sera exécutée de plus, le usestate userlogged userlogged peut être supprimé du code qui n'a plus de sens n'oubliez pas de le supprimer de la fonction oncompleted dans la mutation login conclusion le résultat final de cette étape devrait être le même que le précédent les informations à ce sujet seront affichées mais maintenant suivies d'un nom d'utilisateur ou d'un email dans le prochain document, créons un bouton pour déconnecter cet utilisateur et nettoyer la session, retournant l'application pour le flux de connexion ou d'inscription