Inscription Utilisateur avec Relay et GraphQL en React Native

20 min

inscription de l'utilisateur avec relay introduction la première chose que votre application fera est probablement de demander à l'utilisateur de s'inscrire back4app/parse fournit déjà par défaut une classe user, qui dispose déjà d'une mutation graphql prête à l'emploi pour inscrire de nouveaux utilisateurs lorsque cela est nécessaire pour votre application dans ce guide, vous allez créer une fonctionnalité d'inscription pour une application react native en utilisant relay pour persister nos données sur back4app le flux est très similaire à la création d'un query renderer après l'implémentation, le relay compiler vérifiera le frontend (fragments) et le backend (modèle de données) et retournera si tout correspond si c'est le cas, les types et l'application sont déjà prêts à communiquer avec le backend à tout moment, vous pouvez accéder à ce projet via nos dépôts github pour consulter les styles et le code complet dépôt d'exemple javascript objectif à la fin de ce guide, vous aurez une application react native avec la fonctionnalité d'inscription de l'utilisateur implémentée comme montré ci dessous conditions préalables une application créée sur back4app utilisant le parse server version 3 10 ou supérieur vous devez conclure le tutoriel de configuration de l'environnement relay pour ce tutoriel, nous allons utiliser expo comme framework react native ; pour ce tutoriel, nous allons utiliser javascript comme notre langage d'implémentation par défaut ; pour ce tutoriel, nous allons utiliser notre exemple de style css ; 1 création du formulaire d'inscription si l'application a déjà un composant form, passez à l'étape 2 sinon, n'hésitez pas à suivre notre modèle nous allons utiliser une application expo qui a un formulaire avec le nom d'utilisateur et le mot de passe pour nous faciliter la tâche, nous allons utiliser certaines bibliothèques tierces pour aider à construire la fonctionnalité d'inscription notre composant de formulaire utilisera la bibliothèque formik il est important de noter qu'elle ne déduit pas le résultat final installer formik créer un nouveau composant et nommez le collez le code suivant à l'intérieur 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; l'application devrait fonctionner correctement jusqu'ici le formulaire devrait ressembler à ceci situons notre composant en expliquant quelques points nous utilisons formik pour contrôler les valeurs de notre formulaire vous pouvez également utiliser un formulaire avec html, css et js styled components sera utilisé pour donner des styles css simples au composant il y a un use state pour contrôler si notre utilisateur a été enregistré ou non veuillez regarder la fonction onsubmit notez que la mutation relay sera à l'intérieur de cette fonction encore une fois, ce n'est pas un problème si l'application n'utilise pas formik une fois que nous mettons en œuvre un composant de formulaire, la mutation relay n'a besoin d'être appelée qu'à l'intérieur de la fonction de soumission 2 création de la mutation en utilisant le principe de colocation, créons un nouveau dossier le plus près possible du composant form nommez le mutations mutations pour vous souvenir de la colocation, vous pouvez consulter notre doc commencer , où nous en donnons un bref aperçu pour illustrer comment gérer la colocation, sur l'image ci dessous, le composant signup est enveloppé par un dossier à l'intérieur de ce dossier, nous allons créer le dossier mutations mutations et, à l'intérieur du dossier mutations mutations , nous allons créer la mutation relay cela fonctionne parfaitement sur de grands projets tout ce qui est lié au composant sera placé près de celui ci et sera plus facile à travailler, à trouver, etc utilisez cette approche pour chaque nouvelle mutation de l'application chaque fois, placez la près du composant qui l'utilisera à l'intérieur de ce dossier, vous allez créer un nouveau fichier appelé signupmutation js signupmutation js selon notre dernier guide où nous avons expliqué les mutations relay, vous allez créer une fonction à l'intérieur et l'appeler commit vous pouvez utiliser le code ci dessous 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 }; avant de revenir au composant de formulaire, créons notre variable qui recevra le fragment graphql, représentant la mutation le fragment graphql est ce que le relay compiler lira et fera correspondre avec schema graphql avant le commitmutation, copiez et collez le code suivant 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 `; fichier 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 }; puisque le fragment graphql représente le backend, pour obtenir le code de la mutation relay, vous pouvez aller sur le back4app graphql cookbook et trouver le fragment exécutez yarn relay yarn relay pour générer la nouvelle mutation et mettre à jour les fichiers si tout va bien, les types de mutation seront générés et vous pourrez avancer 3 implémenter la fonction on submit l'étape de soumission est la plus importante c'est ici que la magie de la mutation relay se produit cette étape récupère les valeurs du formulaire à partir de formik si l'application n'utilise pas formik, les valeurs doivent être disponibles ici indépendamment de la manière dont elles sont obtenues retour au composant form, commençons l'implémentation de la mutation relay importer la mutation 1 import signupmutation from ' /mutations/signupmutation'; à l'intérieur de la fonction onsubmit, commencez à créer les variables d'entrée 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } les valeurs sont injectées par formik ici, si vous n'utilisez pas formik, les valeurs viendront probablement via le osubmit natif du formulaire ou comme vous le préférez enfin, appelez la mutation en passant toutes les props (n'oubliez pas de les importer) 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 }); résultat 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 }; exécutez votre projet, enregistrez votre utilisateur et vérifiez le ensuite sur le tableau de bord back4app la mutation renverra les valeurs du serveur une fois le token de session renvoyé, l'application peut commencer à le gérer gestion des erreurs lors de la mutation de validation, l'application peut gérer les erreurs sur onerror elle recevra toujours un tableau d'erreurs le plus courant est que ce tableau ne contient qu'un seul objet contenant le message d'erreur voir l'exemple ci dessous sur la base de cet exemple, n'hésitez pas à créer votre propre gestion des erreurs pour l'instant, si une erreur est renvoyée, nous l'affichons simplement par une alerte 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, conclusion vous avez maintenant une application avec une fonctionnalité d'inscription entièrement fonctionnelle dans le prochain guide, vous comprendrez comment authentifier un utilisateur (connexion) et le déconnecter en utilisant la même approche vous utiliserez également les mutations relay pour appeler notre backend