Current User

get current user using relay for a react native app introduction after implementing user registration and login to your react native app using relay, you need to retrieve the currently logged user data to perform different actions and requests in this guide we’re going to follow the https //www back4app com/docs/parse graphql/graphql get current user and the https //www back4app com/docs/react native/graphql/relay query renderer to retrieve information about the current user the query as graphql is represented as 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } at any time, you can access this project via our github repositories to checkout the styles and complete code https //github com/templates back4app/react native graphql relay js users goal create a component to get information about the current user prerequisites an app created at back4app using the parse server version 3 10 or above you have to conclude the https //www back4app com/docs/react native/graphql/relay setup you have to conclude the https //www back4app com/docs/react native/graphql/users/react native login sample you have to conclude the https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr for this tutorial we are going to use the expo as a react native framework; for this tutorial we are going to use javascript as our default implementation language; at any time, you can access this project via our github repositories to checkout the styles and complete code https //github com/templates back4app/react native graphql relay js users 1 creating the user logged component on signin component folder create a new file and name it userloggedrenderer js userloggedrenderer js inside of userloggedrenderer js userloggedrenderer js , let’s create a component very similar to the query renderer tutorial, but in this case, just the query renderer is needed with a valid session token into the application, the component will be called and will get the current user info the query renderer component will look like the following 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 ); the first @todo is should be implemented with the query to retrieve the info from the user logged the query used for this operation is decribed 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&#x9; the second @todo should be implemented with a function that will render the info about the user only if exists if there is no error we are going to return the rendercontent rendercontent function described below the function will render the current user info(email and username) in a secure way 1 const rendercontent = (viewer) => { 2 if (!viewer? user) { 3 return null; 4 } 5&#x9; 6 const {user} = viewer; 7&#x9; 8 return ( 9 \<view style={ {margintop 15, alignitems 'center'} }> 10 \<text>user {user? username || user? email} logged\</text> 11 \</view> 12 ); 13 }; you should implement the function before the queryrenderer component the final result of the component should look like this 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&#x9; 6 const userloggedrenderer = () => { 7 const rendercontent = (viewer) => { 8 if (!viewer? user) { 9 return null; 10 } 11&#x9; 12 const {user} = viewer; 13&#x9; 14 return ( 15 \<view style={ {margintop 15, alignitems 'center'} }> 16 \<text>user {user? username || user? email} logged\</text> 17 \</view> 18 ); 19 }; 20&#x9; 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&#x9; 58 export default userloggedrenderer; 2 importing the userloggedrenderer into signin component back into the formsignin component, replace the code which returns the current user info with the new user logged component from 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 } to 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } don’t forget to import the userloggedrenderer userloggedrenderer 1 import userloggedrenderer from ' /userloggedrenderer'; now run yarn relay yarn relay command to update with the new query yarn relay yarn relay now, will be displayed the username or email with a valid session token otherwise, the component should not render and, the login will run also, the usestate userlogged userlogged can be removed from the code that not makes sense anymore don’t forget to remove it from the oncompleted function into login mutation conclusion the final result of this step should be the same as the last one the info about it will be displayed but now followed by a username or email in the next doc, let’s create a button to do the log out of this user and clean the session, returning the app for login or sign up flow