Login com Relay e GraphQL no React Native: Guia Completo

16 min

exemplo de login em react native usando relay introdução no último tutorial, você implementou o cadastro de usuário em seu app react native usando back4app e relay neste guia, você construirá o mecanismo de login complementando o recurso de autenticação do seu app como você deve saber, o parse já fornece por padrão uma classe de usuário, que já possui uma mutação graphql pronta para usar para fazer login de usuários quando necessário para seu app o fluxo aqui será muito semelhante ao tutorial de cadastro de usuário você construirá uma tela de login usando formik, então este formulário chamará a mutação relay a mutação relay se comunicará com o servidor back4app gerenciando todo o processo de autenticação a qualquer momento, você pode acessar este projeto através de nossos repositórios no github para conferir os estilos e o código completo https //github com/templates back4app/react native graphql relay js users objetivo no final deste guia, você terá um aplicativo react native com o recurso de login do usuário implementado, conforme mostrado abaixo 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 espere um aplicativo com um formulário de login simples aqui estamos usando um aplicativo expo com um formulário contendo nome de usuário e senha para este tutorial, vamos usar o expo como framework react native; para este tutorial, vamos usar javascript como nossa linguagem de implementação padrão; para este tutorial, vamos usar nosso exemplo de estilo css; 1 criando o formulário de login se a aplicação já possui um componente form, vá para o passo 2 caso contrário, sinta se à vontade para seguir nosso modelo o formulário é semelhante ao formulário usado no documento de cadastro você também pode usá lo como base para login por favor, vá para usuário https //www back4app com/docs/react native/graphql/user sign up relay se você quiser aprender como implementá lo o código do formulário de login deve ser assim 1 import react, {usestate} from 'react'; 2 import environment from ' / /relay/environment'; 3 import {formikprovider, useformik} from 'formik'; 4 import { button, text, textinput, view, touchableopacity } from 'react native'; 5 import styles from " / /style" 6	 7 const signin = () => { 8 const \[userlogged, setuserlogged] = usestate(null); 9	 10 const onsubmit = async (values) => { 11 // @todo the mutation will be implemented here 12 }; 13	 14 const formikbag = useformik({ 15 initialvalues { 16 username '', 17 password '', 18 }, 19 onsubmit, 20 }); 21	 22 const {handlesubmit, setfieldvalue} = formikbag; 23	 24 if (userlogged? id) { 25 return ( 26 \<view style={ {margintop 15, alignitems 'center'} }> 27 \<text>user {userlogged name} logged\</text> 28 \</view> 29 ); 30 } 31	 32 return ( 33 \<formikprovider value={formikbag}> 34 \<view style={styles login wrapper}> 35 \<view style={styles form}> 36 \<text>username\</text> 37 \<textinput 38 name={"username"} 39 style={styles form input} 40 autocapitalize="none" 41 onchangetext={(text) => setfieldvalue("username", text)} 42 /> 43 \<text>password\</text> 44 \<textinput 45 style={styles form input} 46 name={"password"} 47 autocapitalize="none" 48 securetextentry 49 onchangetext={(text) => setfieldvalue("password", text)} 50 /> 51 \<touchableopacity onpress={() => handlesubmit()}> 52 \<view style={styles button}> 53 \<text style={styles button label}>{"sign in"}\</text> 54 \</view> 55 \</touchableopacity> 56 \</view> 57 \</view> 58 \</formikprovider> 59 ); 60 }; 61	 62 export default signin; execute seu aplicativo e você verá uma tela como mostrada abaixo por favor, olhe para a função onsubmit note que a mutação relay estará dentro desta função novamente, não é um problema se o aplicativo não estiver usando o formik uma vez que você está implementando um componente de formulário, a mutação relay só precisa ser chamada dentro da função de envio 2 criando a mutação usando o princípio de colocação, vamos criar uma nova pasta chamada mutations o mais próximo possível do componente de formulário se você quiser aprender mais sobre colocação, por favor, vá para https //www back4app com/docs/react native/graphql/get started relay graphql guia na imagem abaixo, você pode ver o princípio de colocação em prática tudo relacionado ao componente está próximo a ele uma pasta envolve o componente login, e dentro dela, você criará outra pasta chamada mutations na pasta mutations, você criará a mutação relay este padrão funciona perfeitamente em grandes projetos sempre que você tiver uma nova mutação, coloque a perto do componente que a usará dentro desta pasta, você criará um novo arquivo chamado loginmutation js loginmutation js de acordo com nosso guia trabalhando com usuários, onde explicamos as mutations do relay, você criará uma função de commit, conforme mostrado abaixo 1 function commit({ environment, input, oncompleted, onerror }) { 2 const variables = { input }; 3	 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11	 12 export default { 13 commit, 14 }; antes de voltar para o componente do formulário, vamos criar nossa variável que receberá o fragmento graphql, representando a mutação o fragmento graphql é o que o compilador relay lerá e combinará com schema graphql antes do commitmutation, copie e cole o seguinte código 1 const mutation = graphql` 2 mutation loginmutation($input logininput!) { 3 login(input $input) { 4 viewer { 5 user { 6 id 7 username 8 createdat 9 } 10 sessiontoken 11 } 12 } 13 } 14 `; arquivo final 1 import { commitmutation, graphql } from 'react relay'; 2	 3 const mutation = graphql` 4 mutation loginmutation($input logininput!) { 5 login(input $input) { 6 viewer { 7 user { 8 id 9 createdat 10 updatedat 11 username 12 } 13 sessiontoken 14 } 15 } 16 } 17 `; 18	 19 function commit({ environment, input, oncompleted, onerror }) { 20 const variables = { input }; 21	 22 commitmutation(environment, { 23 mutation, 24 variables, 25 oncompleted, 26 onerror, 27 }); 28 } 29	 30 export default { 31 commit, 32 }; como o fragmento graphql representa o backend, para obter o código da mutação relay, você pode ir ao https //www back4app com/docs/react native/graphql/users/back4app com/docs/parse graphql/graphql sign in e encontrar o fragmento execute yarn relay yarn relay para gerar a nova mutação e atualizar os arquivos se tudo estiver ok, os tipos de mutação serão gerados e você poderá prosseguir 3 implementar função on submit a etapa de envio é a mais importante é aqui que a mágica da mutação relay acontece esta etapa obtém os valores do formulário do formik se a aplicação não estiver usando formik, os valores precisam estar disponíveis aqui, independentemente da forma como são obtidos de volta ao componente de formulário, vamos começar a implementação da mutação relay importe a mutação 1 import loginmutation from ' /mutations/loginmutation'; dentro da função onsubmit, comece a criar as variáveis de entrada 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 const input = { 4 username, 5 password, 6 }; 7 } os valores são injetados pelo formik aqui, se você não estiver usando o formik, os valores provavelmente virão via osubmit nativo do formulário ou como preferir por fim, chame a mutação passando todas as props (lembre se de importá las) 1 loginmutation commit({ 2 environment, 3 input, 4 oncompleted (response) => { 5 if(!response? login || response? login === null) { 6 alert('error while logging'); 7 return; 8 } 9	 10 const { viewer } = response? login; 11 const { sessiontoken, user } = viewer; 12	 13 if (sessiontoken !== null) { 14 setuserlogged(user); 15 alert(`user ${user username} successfully logged`); 16 return; 17 } 18 }, 19 onerror (errors) => { 20 alert(errors\[0] message); 21 }, 22 }); resultado final do onsubmit 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 username, 6 password, 7 }; 8	 9 loginmutation commit({ 10 environment, 11 input, 12 oncompleted (response) => { 13 if(!response? login || response? login === null) { 14 alert('error while logging'); 15 return; 16 } 17	 18 const { viewer } = response? login; 19 const { sessiontoken, user } = viewer; 20	 21 if (sessiontoken !== null) { 22 setuserlogged(user); 23 alert(`user ${user username} successfully logged`); 24 return; 25 } 26 }, 27 onerror (errors) => { 28 alert(errors\[0] message); 29 }, 30 }); 31 }; execute seu projeto, registre seu usuário e depois verifique no back4app dashboard a mutação retornará os valores do servidor uma vez que o token da sessão é retornado, a aplicação pode começar a gerenciá lo testando usando o usuário criado no último tutorial se tudo funcionar bem, será exibido um alerta como abaixo tratamento de erros na mutação de commit, a aplicação pode lidar com erros em onerror sempre receberá um array de erros o mais comum é que esse array tenha apenas um objeto contendo a mensagem de erro veja o exemplo abaixo 1 { 2 "errors" \[ 3 { 4 "message" "nome de usuário/senha inválidos ", 5 "locations" \[ 6 { 7 "line" 2, 8 "column" 3 9 } 10 ], 11 "path" \[ 12 "login" 13 ], 14 "extensions" { 15 "code" 202 16 } 17 } 18 ], 19 "data" { 20 "login" null 21 } 22 } com base neste exemplo, sinta se à vontade para criar seu próprio tratamento de erro por enquanto, se algum erro for retornado, apenas o exibimos por meio de um alerta 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, conclusão agora você tem uma aplicação com um recurso de login totalmente funcional no próximo guia, você entenderá como fazer logout usando a mesma abordagem você também usará mutations do relay para chamar nosso backend