Implementação de Usuário Logado em React Native com Relay

11 min

obter usuário atual usando relay para um app react native introdução após implementar o registro e login de usuário no seu app react native usando relay, você precisa recuperar os dados do usuário atualmente logado para realizar diferentes ações e solicitações neste guia, vamos seguir o https //www back4app com/docs/parse graphql/graphql get current user e o https //www back4app com/docs/react native/graphql/relay query renderer para recuperar informações sobre o usuário atual a consulta como graphql é representada como 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } a qualquer momento, você pode acessar este projeto através de nossos repositórios do github para verificar os estilos e o código completo https //github com/templates back4app/react native graphql relay js users objetivo criar um componente para obter informações sobre o usuário atual pré requisitos um aplicativo criado no back4app usando a versão 3 10 ou superior do parse server você deve concluir o https //www back4app com/docs/react native/graphql/relay setup você deve concluir o https //www back4app com/docs/react native/graphql/users/react native login sample você deve concluir o https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr para este tutorial, vamos usar o expo como um framework react native; para este tutorial, vamos usar javascript como nossa linguagem de implementação padrão; a qualquer momento, você pode acessar este projeto através de nossos repositórios do github para conferir os estilos e o código completo https //github com/templates back4app/react native graphql relay js users 1 criando o componente usuário logado na pasta do componente signin, crie um novo arquivo e nomeie o como userloggedrenderer js userloggedrenderer js dentro de userloggedrenderer js userloggedrenderer js , vamos criar um componente muito semelhante ao tutorial do query renderer, mas neste caso, apenas o query renderer é necessário com um token de sessão válido na aplicação, o componente será chamado e obterá as informações do usuário atual o componente query renderer ficará assim 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 ); o primeiro @todo deve ser implementado com a consulta para recuperar as informações do usuário logado a consulta usada para esta operação é descrita em 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	 o segundo @todo deve ser implementado com uma função que renderizará as informações sobre o usuário apenas se existirem se não houver erro, vamos retornar a rendercontent rendercontent função descrita abaixo a função renderizará as informações do usuário atual (email e nome de usuário) de forma 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 }; você deve implementar a função antes do componente queryrenderer o resultado final do componente deve ser assim 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 o userloggedrenderer no componente signin de volta ao componente formsignin, substitua o código que retorna as informações do usuário atual pelo novo componente usuário logado 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 } não se esqueça de importar o userloggedrenderer userloggedrenderer 1 import userloggedrenderer from ' /userloggedrenderer'; agora execute yarn relay yarn relay comando para atualizar com a nova consulta yarn relay yarn relay agora, será exibido o nome de usuário ou e mail com um token de sessão válido caso contrário, o componente não deve ser renderizado e o login será executado além disso, o usestate userlogged userlogged pode ser removido do código que não faz mais sentido não se esqueça de removê lo da função oncompleted na mutação login conclusão o resultado final desta etapa deve ser o mesmo que o anterior as informações sobre isso serão exibidas, mas agora seguidas por um nome de usuário ou e mail no próximo documento, vamos criar um botão para fazer o logout deste usuário e limpar a sessão, retornando o aplicativo para o fluxo de login ou cadastro