Registro de Usuarios en React Native con GraphQL y Relay

20 min

registro de usuario con relay introducción lo primero que hará tu aplicación probablemente será pedir al usuario que se registre back4app/parse ya proporciona por defecto una clase user, que ya tiene una mutación graphql lista para usar para registrar nuevos usuarios cuando sea necesario para tu aplicación en esta guía, crearás una función de registro para una aplicación de react native utilizando relay para persistir nuestros datos en back4app el flujo es muy similar a crear un renderizador de consultas después de la implementación, el compilador de relay verificará el frontend (fragmentos) y el backend (modelo de datos) y devolverá si todo coincide si es así, los tipos y la aplicación ya están listos para comunicarse con el backend 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 repositorio de ejemplo en javascript objetivo al final de esta guía, tendrás una aplicación de react native con la función de registro de usuario implementada como se muestra a continuación requisitos previos una aplicación creada en back4app usando el parse server version 3 10 o superior tienes que concluir el tutorial de configuración del entorno relay para este tutorial vamos a usar expo como un 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 registro si la aplicación ya tiene un componente de formulario, ve al paso 2 de lo contrario, siéntete libre de seguir nuestro boilerplate usaremos una aplicación expo que tiene un formulario con el nombre de usuario y la contraseña para hacernos la vida más fácil, vamos a usar algunas bibliotecas de terceros para ayudar a construir la función de registro nuestro componente de formulario utilizará la biblioteca formik es importante notar que no infiere el resultado final instalar formik crea un nuevo componente y nómbralo formsignup js formsignup js pega el siguiente código dentro de él 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; la aplicación debería funcionar bien hasta aquí el formulario debería verse así situemos nuestro componente explicando algunos puntos estamos usando formik para controlar los valores de nuestro formulario también puedes usar un formulario con html, css y js se usarán styled components para dar estilos css simples al componente hay un use state para controlar si nuestro usuario fue registrado o no 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á usando formik una vez que estamos 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 lo más cerca posible del componente de formulario nómbrala como mutaciones mutaciones para recordar sobre la colocación, puedes ir a nuestro documento introducción , donde damos un breve resumen sobre ello ejemplificando cómo se maneja la colocación, en la imagen de abajo el componente signup está envuelto por una carpeta dentro de esta carpeta es donde crearemos la carpeta mutaciones mutaciones y, dentro de la carpeta mutaciones mutaciones crearemos la mutación de relay esto funciona perfectamente en proyectos grandes todo lo relacionado con el componente se colocará cerca de él y será más fácil trabajar, encontrar, etc usa este enfoque para cada nueva mutación de la aplicación cada vez colócala cerca del componente que la usará dentro de esta carpeta, crearás un nuevo archivo llamado signupmutation js signupmutation js de acuerdo con nuestra última guía donde explicamos las mutaciones de relay, crearás una función dentro y la llamarás commit puedes usar el código 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, creemos 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 signupmutation($input signupinput!) { 3 signup(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 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 }; dado que el fragmento de graphql representa el backend, para obtener el código de la mutación de relay, puedes ir al back4app graphql cookbook 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 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 volviendo al componente de formulario, comencemos la implementación de la mutación relay importar la mutación 1 import signupmutation from ' /mutations/signupmutation'; dentro de la función onsubmit, comienza a crear las variables de entrada 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } 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 props (recuerda importarlas) 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 de 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 }; 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 manejo de errores al realizar una 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 contenga solo un objeto con el mensaje de error vea el ejemplo a continuación 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 registro completamente funcional en la próxima guía, entenderá cómo autenticar a un usuario (iniciar sesión) y cerrar sesión utilizando el mismo enfoque también utilizará relay mutations para llamar a nuestro backend