Implementar Logout em React Native com GraphQL e Relay

logout de usuário do react native introdução neste passo, você criará o logout do usuário para react native usando relay, a última implementação para esta seção do usuário este passo é simples e seguiremos nosso https //www back4app com/docs/parse graphql/graphql logout mutation do nosso livro de receitas graphql você implementará a mutação de logout e a chamará usando um botão na aplicação react native 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 objetivo para implementar o recurso de logout em nosso aplicativo react native usando relay e a api graphql do back4app pré requisitos para este tutorial, usaremos o parse server na versão 4 4 se você quiser usar outras versões, pode verificar o código de mutação correspondente em https //www back4app com/docs/parse graphql/graphql logout mutation como exemplo para sua respectiva versão 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; 1 criando a mutação de logout de volta à pasta signin, dentro da pasta mutations, crie um novo arquivo e chame o de logoutmutation js logoutmutation js copie e cole o seguinte código dentro 1 import { commitmutation, graphql } from 'react relay'; 2&#x9; 3 const mutation = graphql` 4 mutation logoutmutation($input logoutinput!) { 5 logout(input $input) { 6 clientmutationid 7 } 8 } 9 `; 10&#x9; 11 function commit({ environment, input, oncompleted, onerror }) { 12 const variables = { input }; 13&#x9; 14 commitmutation(environment, { 15 mutation, 16 variables, 17 oncompleted, 18 onerror, 19 }); 20 } 21&#x9; 22 export default { 23 commit, 24 }; execute yarn relay yarn relay no seu terminal para atualizar os tipos de relay 2 criando o botão de logout agora, abra o formsignin js formsignin js componente vamos adicionar o botão de logout e chamar a mutação relay importe a nova mutação relay no início do arquivo 1 import logoutmutation from " /mutations/logoutmutation"; então, crie a função responsável por chamar a mutação logout 1 const handlelogout = async () => { 2 logoutmutation commit({ 3 environment environment, 4 input {}, 5 oncompleted async () => { 6 await asyncstorage removeitem('sessiontoken'); 7 setsessiontoken(null); 8 alert('user successfully logged out'); 9 }, 10 onerror (errors) => { 11 alert(errors\[0] message); 12 }, 13 }); 14 }; o que está acontecendo em oncompleted oncompleted está removendo o token de sessão do async storage porque não é mais válido está limpando o usestate local que recupera o token de sessão pela mesma razão acima um alerta dizendo que o usuário foi desconectado com sucesso depois, logo abaixo do userloggedrenderer, vamos implementar o botão responsável por chamar o logout de 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } para 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } importe o button da biblioteca react native import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; a tela do aplicativo deve parecer com isso 3 testando testando o botão, ao clicar deve ser feito o logout e aparecer um alerta e, depois deve retornar à página de login conclusão agora você implementou os principais recursos de autenticação de usuário necessários para qualquer aplicativo seus usuários agora podem se inscrever, fazer login, navegar na área autenticada e sair do seu aplicativo react native usando relay e a api graphql do back4app