Inicio de Sesión en React Native con GraphQL y Relay Modern

17 min

ejemplo de inicio de sesión en react native usando relay introducción en el último tutorial, implementaste el registro de usuario en tu aplicación de react native utilizando back4app y relay en esta guía, construirás el mecanismo de inicio de sesión complementando la función de autenticación de tu aplicación como ya sabes, parse ya proporciona por defecto una clase de usuario, que ya tiene una mutación graphql lista para usar para iniciar sesión a los usuarios cuando sea necesario para tu aplicación el flujo aquí será muy similar al tutorial de registro de usuario construirás una pantalla de inicio de sesión usando formik, luego este formulario llamará a la mutación de relay la mutación de relay se comunicará con el servidor de back4app manejando todo el proceso de autenticación 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 al final de esta guía, tendrás una aplicación de react native con la función de inicio de sesión de usuario implementada, como se muestra a continuación 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 esperar una aplicación con un formulario de inicio de sesión simple aquí estamos utilizando una aplicación expo que tiene un formulario con el nombre de usuario y la contraseña 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; para este tutorial, vamos a usar nuestro ejemplo de estilo css; 1 creando el formulario de inicio de sesión si la aplicación ya tiene un componente de formulario, ve al paso 2 de lo contrario, siéntete libre de seguir nuestro boilerplate el formulario es similar al formulario utilizado en el documento de registro también puedes usarlo como base para el inicio de sesión por favor, ve a usuario https //www back4app com/docs/react native/graphql/user sign up relay si deseas aprender cómo implementarlo el código del formulario de inicio de sesión debería verse así 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; ejecuta tu aplicación y verás una pantalla como se muestra a continuación por favor, mira la función onsubmit ten en cuenta que la mutación de relay estará dentro de esta función nuevamente, no es un problema si la aplicación no está utilizando formik una vez que estés implementando un componente de formulario, la mutación de relay solo necesita ser llamada dentro de la función de envío 2 creando la mutación usando el principio de colocación, vamos a crear una nueva carpeta llamada mutations lo más cerca posible del componente de formulario si deseas aprender más sobre colocación, por favor ve a https //www back4app com/docs/react native/graphql/get started relay graphql guía en la imagen de abajo, puedes ver el principio de colocación en práctica todo lo relacionado con el componente está cerca de él una carpeta envuelve el componente login, y dentro de ella, crearás otra carpeta llamada mutations en la carpeta de mutations, crearás la mutación de relay este patrón funciona perfectamente en proyectos grandes cada vez que tengas una nueva mutación, colócala cerca del componente que la usará dentro de esta carpeta, crearás un nuevo archivo llamado loginmutation js loginmutation js de acuerdo con nuestra guía de trabajo con usuarios, donde explicamos las mutaciones de relay, crearás una función de commit, como se muestra a continuación 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 volver al componente del formulario, vamos a crear nuestra variable que recibirá el fragmento de graphql, representando la mutación el fragmento de graphql es lo que el compilador de relay leerá y emparejará con schema graphql antes de commitmutation, copia y pega el siguiente 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 `; archivo 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 }; dado que el fragmento de graphql representa el backend, para obtener el código de la mutación de relay, puedes ir al https //www back4app com/docs/react native/graphql/users/back4app com/docs/parse graphql/graphql sign in y encontrar el fragmento ejecuta yarn relay yarn relay para generar la nueva mutación y actualizar los archivos si todo está bien, se generarán los tipos de mutación y podrás continuar 3 implementar la función on submit el paso de envío es el más importante aquí es donde ocurre la magia de la mutación de relay este paso obtiene los valores del formulario de formik si la aplicación no está utilizando formik, los valores deben estar disponibles aquí independientemente de la forma en que los obtengan volver al componente de formulario, comencemos la implementación de la mutación relay importar la mutación 1 import loginmutation from ' /mutations/loginmutation'; dentro de la función onsubmit, comienza a crear las variables de entrada 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 const input = { 4 username, 5 password, 6 }; 7 } los valores son inyectados por formik aquí, si no estás usando formik, los valores probablemente vendrán a través del osubmit nativo del formulario o como prefieras por último, llama a la mutación pasando todas las propiedades (recuerda importarlas) 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 de 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 }; ejecuta tu proyecto, registra tu usuario y luego verifícalo en el panel de control de back4app la mutación devolverá los valores del servidor una vez que se devuelva el token de sesión, la aplicación podrá comenzar a gestionarlo pruebas utilizando el usuario creado en el último tutorial si todo funciona bien, se mostrará una alerta como la siguiente manejo de errores en la mutación de confirmación, la aplicación puede manejar errores en onerror siempre recibirá un array de errores lo más común es que este array tenga solo un objeto que contenga el mensaje de error vea el ejemplo a continuación 1 { 2 "errors" \[ 3 { 4 "message" "nombre de usuario/contraseña 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 } basado en este ejemplo, siéntase libre de crear su propio manejo de errores por ahora, si se devuelve algún error, simplemente lo mostramos mediante una alerta 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, conclusión ahora tiene una aplicación con una función de inicio de sesión completamente funcional en la próxima guía, entenderá cómo cerrar sesión utilizando el mismo enfoque también utilizará las mutaciones de relay para llamar a nuestro backend