Cadastro de Usuário com GraphQL e Relay no React Native

20 min

cadastro de usuário com relay introdução a primeira coisa que seu aplicativo fará provavelmente é pedir ao usuário para se cadastrar o back4app/parse já fornece por padrão uma classe user, que já possui uma mutação graphql pronta para usar para cadastrar novos usuários quando necessário para seu aplicativo neste guia, você criará um recurso de cadastro para um aplicativo react native usando relay para persistir nossos dados no back4app o fluxo é muito semelhante a criar um query renderer após a implementação, o relay compiler verificará o frontend (fragmentos) e o backend (modelo de dados) e retornará se tudo corresponde se sim, os tipos e a aplicação já estão prontos para se comunicar com o backend 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 ao final deste guia, você terá um aplicativo react native com o recurso de cadastro de usuário implementado como mostrado abaixo pré requisitos um aplicativo criado no back4app usando o https //www back4app com/docs/platform/parse server version ou superior você deve concluir o https //www back4app com/docs/react native/graphql/relay setup 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; para este tutorial, vamos usar nosso exemplo de style css; 1 criando o formulário de cadastro se o aplicativo já tiver um componente form, vá para a etapa 2 caso contrário, sinta se à vontade para seguir nosso modelo usaremos um aplicativo expo que possui um formulário com nome de usuário e senha para facilitar nossa vida, vamos usar algumas bibliotecas de terceiros para ajudar a construir o recurso de cadastro nosso componente de formulário usará a biblioteca formik é importante notar que ela não infere o resultado final instale o formik yarn add formik crie um novo componente e nomeie o como formsignup js formsignup js cole o seguinte código dentro dele 1 import react, { usestate } from 'react'; 2 import { button, text, textinput, view, touchableopacity } from "react native"; 3 import { useformik, formikprovider } from 'formik'; 4 import styles from " / /style" 5 import environment from ' / /relay/environment'; 6	 7 const signup = () => { 8 const \[usercreated, setusercreated] = usestate(); 9	 10 const onsubmit = (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 if (usercreated? id) { 24 return ( 25 \<view style={ {margintop 15, alignitems 'center'} }> 26 \<text>user {usercreated name} created\</text> 27 \</view> 28 ); 29 } 30	 31 return ( 32 \<formikprovider value={formikbag}> 33 \<view style={styles login wrapper}> 34 \<view style={styles form}> 35 \<text>username\</text> 36 \<textinput 37 name={"username"} 38 style={styles form input} 39 autocapitalize="none" 40 onchangetext={(text) => setfieldvalue("username", text)} 41 /> 42 \<text>password\</text> 43 \<textinput 44 style={styles form input} 45 name={"password"} 46 autocapitalize="none" 47 securetextentry 48 onchangetext={(text) => setfieldvalue("password", text)} 49 /> 50 \<touchableopacity onpress={() => handlesubmit()}> 51 \<view style={styles button}> 52 \<text style={styles button label}>{"sign in"}\</text> 53 \</view> 54 \</touchableopacity> 55 \</view> 56 \</view> 57 \</formikprovider> 58 ); 59 }; 60	 61 export default signup; o aplicativo deve funcionar bem até aqui o formulário deve parecer com isso vamos situar nosso componente explicando alguns pontos estamos usando formik para controlar os valores do nosso formulário você também pode usar um formulário com html, css e js styled components será usado para dar estilos css simples para o componente há um use state para controlar se nosso usuário foi registrado ou não 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 a aplicação não estiver usando formik uma vez que estamos 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 o mais próximo possível do componente de formulário nomeie a como mutations mutations para lembrar sobre colocação, você pode ir ao nosso documento https //www back4app com/docs/react native/graphql/get started relay graphql , onde damos um resumo sobre isso exemplificando como lida com a colocação, na imagem abaixo o componente signup está envolto por uma pasta dentro dessa pasta é onde criaremos a pasta mutations mutations e, dentro da mutations mutations pasta, criaremos a mutação relay isso funciona perfeitamente em grandes projetos tudo relacionado ao componente será colocado próximo a ele e será mais fácil de trabalhar, encontrar, etc use esta abordagem para cada nova mutação da aplicação sempre coloque a próxima ao componente que a utilizará dentro desta pasta, você criará um novo arquivo chamado signupmutation js signupmutation js de acordo com nosso último guia onde explicamos as mutations relay, você criará uma função dentro e a chamará de commit você pode usar o código 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 de formulário, vamos criar nossa variável que receberá o fragmento graphql, representando a mutação o fragmento graphql é o que o relay compiler irá ler e combinar com schema graphql antes do commitmutation, copie e cole o seguinte código 1 const mutation = graphql` 2 mutation signupmutation($input signupinput!) { 3 signup(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 signupmutation($input signupinput!) { 5 signup(input $input) { 6 viewer { 7 user { 8 id 9 username 10 createdat 11 } 12 sessiontoken 13 } 14 } 15 } 16 `; 17	 18 function commit({environment, input, oncompleted, onerror}) { 19 const variables = {input}; 20	 21 commitmutation(environment, { 22 mutation, 23 variables, 24 oncompleted, 25 onerror, 26 }); 27 } 28	 29 export default { 30 commit, 31 }; 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 up 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 eles são obtidos de volta ao componente de formulário, vamos começar a implementação da mutação relay importar a mutação 1 import signupmutation from ' /mutations/signupmutation'; dentro da função onsubmit, comece a criar as variáveis de entrada 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } os valores são injetados pelo formik aqui, se você não estiver usando o formik, os valores provavelmente virão através do osubmit nativo do formulário ou como preferir por fim, chame a mutação passando todas as props (lembre se de importá las) 1 signupmutation commit({ 2 environment, 3 input, 4 oncompleted ({signup}) => { 5 const { viewer } = signup; 6 const { sessiontoken, user } = viewer; 7	 8 if (sessiontoken !== null) { 9 alert(`user ${user username} successfully created`); 10 setusercreated(user); 11 return; 12 } 13 }, 14 onerror (errors) => { 15 alert(errors\[0] message); 16 }, 17 }); resultado final do onsubmit 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10	 11 signupmutation commit({ 12 environment, 13 input, 14 oncompleted ({signup}) => { 15 const { viewer } = signup; 16 const { sessiontoken, user } = viewer; 17 18 if (sessiontoken !== null) { 19 alert(`user ${user username} successfully created`); 20 setusercreated(user); 21 return; 22 } 23 }, 24 onerror (errors) => { 25 alert(errors\[0] message); 26 }, 27 }); 28 }; execute seu projeto, registre seu usuário e depois verifique no painel do back4app 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 tratamento de erros na mutação de commit, a aplicação pode tratar erros no 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" "a conta já existe para este nome de usuário ", 5 "locations" \[ 6 { 7 "line" 2, 8 "column" 3 9 } 10 ], 11 "path" \[ 12 "signup" 13 ], 14 "extensions" { 15 "code" 202 16 } 17 } 18 ], 19 "data" { 20 "signup" 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 cadastro totalmente funcional no próximo guia, você entenderá como autenticar um usuário (login) e deslogá lo usando a mesma abordagem você também usará mutations do relay para chamar nosso backend