Usuario actual con GraphQL en React Native usando Relay

11 min

obtener el usuario actual usando relay para una aplicación de react native introducción después de implementar el registro de usuarios y el inicio de sesión en tu aplicación de react native usando relay, necesitas recuperar los datos del usuario actualmente conectado para realizar diferentes acciones y solicitudes en esta guía vamos a seguir el https //www back4app com/docs/parse graphql/graphql get current user y el https //www back4app com/docs/react native/graphql/relay query renderer para recuperar información sobre el usuario actual la consulta como graphql se representa como 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } en cualquier momento, puedes acceder a este proyecto a través de nuestros repositorios de github para revisar los estilos y el código completo https //github com/templates back4app/react native graphql relay js users objetivo crear un componente para obtener información sobre el usuario actual requisitos previos una aplicación creada en back4app utilizando la versión 3 10 o superior de parse server tienes que concluir el https //www back4app com/docs/react native/graphql/relay setup tienes que concluir el https //www back4app com/docs/react native/graphql/users/react native login sample tienes que concluir el https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr para este tutorial vamos a usar expo como marco de trabajo de react native; para este tutorial vamos a usar javascript como nuestro lenguaje de implementación predeterminado; en cualquier momento, puedes acceder a este proyecto a través de nuestros repositorios de github para revisar los estilos y el código completo https //github com/templates back4app/react native graphql relay js users 1 creando el componente usuario conectado en la carpeta del componente signin, crea un nuevo archivo y nómbralo userloggedrenderer js userloggedrenderer js dentro de userloggedrenderer js userloggedrenderer js , vamos a crear un componente muy similar al tutorial del query renderer, pero en este caso, solo se necesita el renderizador de consultas con un token de sesión válido en la aplicación, se llamará al componente y obtendrá la información del usuario actual el componente query renderer se verá como el siguiente 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 ); el primer @todo debe ser implementado con la consulta para recuperar la información del usuario conectado la consulta utilizada para esta operación se describe en 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	 el segundo @todo debe ser implementado con una función que renderizará la información sobre el usuario solo si existe si no hay error, vamos a devolver la rendercontent rendercontent función descrita a continuación la función renderizará la información del usuario actual (correo electrónico y nombre de usuario) de manera segura 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 }; debes implementar la función antes del componente queryrenderer el resultado final del componente debería verse así 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 importando el userloggedrenderer en el componente signin de vuelta en el componente formsignin, reemplaza el código que devuelve la información del usuario actual con el nuevo componente usuario conectado 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 } para 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } no olvides importar el userloggedrenderer userloggedrenderer 1 import userloggedrenderer from ' /userloggedrenderer'; ahora ejecuta yarn relay yarn relay comando para actualizar con la nueva consulta yarn relay yarn relay ahora, se mostrará el nombre de usuario o correo electrónico con un token de sesión válido de lo contrario, el componente no debería renderizarse y, se ejecutará el inicio de sesión además, el usestate userlogged userlogged se puede eliminar del código que ya no tiene sentido no olvides eliminarlo de la función oncompleted en la mutación login conclusión el resultado final de este paso debería ser el mismo que el anterior la información sobre esto se mostrará pero ahora seguida de un nombre de usuario o correo electrónico en el próximo documento, vamos a crear un botón para cerrar sesión de este usuario y limpiar la sesión, regresando la aplicación al flujo de inicio de sesión o registro