Intégration de la connexion utilisateur avec GraphQL et Relay

16 min

exemple de connexion react native utilisant relay introduction dans le dernier tutoriel, vous avez implémenté l'inscription des utilisateurs dans votre application react native en utilisant back4app et relay dans ce guide, vous allez construire le mécanisme de connexion complétant la fonctionnalité d'authentification de votre application comme vous le savez peut être, parse fournit déjà par défaut une classe utilisateur, qui dispose déjà d'une mutation graphql prête à l'emploi pour connecter les utilisateurs lorsque cela est nécessaire pour votre application le flux ici sera très similaire au tutoriel d'inscription des utilisateurs vous allez construire un écran de connexion en utilisant formik, puis ce formulaire appellera la mutation relay la mutation relay communiquera avec le serveur back4app gérant l'ensemble du processus d'authentification à 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é de connexion utilisateur implémentée, comme montré ci dessous prérequis une application créée sur back4app utilisant la version 3 10 ou supérieure de parse server vous devez conclure le tutoriel de configuration de l'environnement relay attendez vous à une application avec un formulaire de connexion simple ici, nous utilisons une application expo ayant un formulaire avec le nom d'utilisateur et le mot de passe 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 de connexion si l'application a déjà un composant form, passez à l'étape 2 sinon, n'hésitez pas à suivre notre modèle le formulaire est similaire à celui utilisé dans le document d'inscription vous pouvez également l'utiliser comme base pour la connexion veuillez consulter l'utilisateur inscription de l'utilisateur si vous souhaitez apprendre comment l'implémenter le code du formulaire de connexion devrait ressembler à ceci 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; exécutez votre application, et vous verrez un écran comme indiqué ci dessous 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 vous implémentez un composant de formulaire, la mutation relay doit seulement être appelée à 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 appelé mutations le plus près possible du composant de formulaire si vous souhaitez en savoir plus sur la colocation, veuillez consulter guide de démarrage dans l'image ci dessous, vous pouvez voir le principe de colocation en pratique tout ce qui est lié au composant est proche de celui ci un dossier enveloppe le composant login, et à l'intérieur, vous créerez un autre dossier appelé mutations dans le dossier mutations, vous créerez la mutation relay ce modèle fonctionne parfaitement sur de grands projets chaque fois que vous avez une nouvelle mutation, placez la près du composant qui l'utilisera dans ce dossier, vous allez créer un nouveau fichier appelé loginmutation js loginmutation js selon notre guide de travail avec les utilisateurs, où nous avons expliqué les mutations relay, vous allez créer une fonction de commit, comme indiqué 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 compilateur relay lira et fera correspondre avec schema graphql avant le commitmutation, copiez et collez le code suivant 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 `; fichier 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 }; puisque le fragment graphql représente le backend, pour obtenir le code de la mutation relay, vous pouvez aller au 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 loginmutation from ' /mutations/loginmutation'; à 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 const input = { 4 username, 5 password, 6 }; 7 } 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 propriétés (n'oubliez pas de les importer) 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 }); résultat 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 }; exécutez votre projet, enregistrez votre utilisateur puis vérifiez le sur le tableau de bord back4app la mutation renverra les valeurs du serveur une fois le jeton de session renvoyé, l'application peut commencer à le gérer test en utilisant l'utilisateur créé lors du dernier tutoriel si tout fonctionne correctement, une alerte s'affichera comme ci dessous gestion des erreurs lors de la mutation de commit, 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é de connexion entièrement fonctionnelle dans le prochain guide, vous comprendrez comment vous déconnecter en utilisant la même approche vous utiliserez également les mutations relay pour appeler notre backend