Déconnexion utilisateur React Native avec Relay & GraphQL

déconnexion de l'utilisateur react native introduction dans cette étape, vous allez créer la déconnexion de l'utilisateur pour react native en utilisant relay, la dernière implémentation pour cette section de l'utilisateur cette étape est simple et nous suivrons notre guide de déconnexion graphql https //www back4app com/docs/parse graphql/graphql logout mutation de notre livre de recettes graphql vous allez implémenter la mutation de déconnexion et l'appeler à l'aide d'un bouton dans l'application react native à 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 pour implémenter la fonctionnalité de déconnexion dans notre application react native en utilisant relay et l'api graphql de back4app prérequis pour ce tutoriel, nous allons utiliser le serveur parse en version 4 4 si vous souhaitez utiliser d'autres versions, vous pouvez consulter le code de mutation correspondant à guide de déconnexion graphql en exemple pour votre version respective vous devez conclure le tutoriel de configuration de l'environnement relay vous devez conclure le exemple de connexion react native utilisant relay vous devez conclure le utilisateur connecté react native 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; 1 création de la mutation de déconnexion retournez dans le dossier signin, dans le dossier mutations, créez un nouveau fichier et appelez le logoutmutation js logoutmutation js copiez et collez le code suivant à l'intérieur 1 import { commitmutation, graphql } from 'react relay'; 2&#x9; 3 const mutation = graphql` 4 mutation logoutmutation($input logoutinput!) { 5 logout(input $input) { 6 clientmutationid 7 } 8 } 9 `; 10&#x9; 11 function commit({ environment, input, oncompleted, onerror }) { 12 const variables = { input }; 13&#x9; 14 commitmutation(environment, { 15 mutation, 16 variables, 17 oncompleted, 18 onerror, 19 }); 20 } 21&#x9; 22 export default { 23 commit, 24 }; exécutez yarn relay yarn relay dans votre terminal pour mettre à jour les types de relay 2 création du bouton de déconnexion maintenant, ouvrez le formsignin js formsignin js composant ajoutons le bouton de déconnexion et appelons la mutation relay importez la nouvelle mutation relay au début du fichier 1 import logoutmutation from " /mutations/logoutmutation"; ensuite, créez la fonction responsable d'appeler la mutation logout maintenant, ouvrez le formsignin js formsignin js composant ajoutons le bouton de déconnexion et appelons la mutation relay 1 const handlelogout = async () => { 2 logoutmutation commit({ 3 environment environment, 4 input {}, 5 oncompleted async () => { 6 await asyncstorage removeitem('sessiontoken'); 7 setsessiontoken(null); 8 alert('user successfully logged out'); 9 }, 10 onerror (errors) => { 11 alert(errors\[0] message); 12 }, 13 }); 14 }; que se passe t il dans oncompleted oncompleted il supprime le jeton de session du stockage asynchrone car il n'est plus valide il nettoie l'état local usestate qui récupère le jeton de session pour la même raison ci dessus une alerte disant que l'utilisateur a été déconnecté avec succès ensuite, juste en dessous de userloggedrenderer, implémentons le bouton responsable d'appeler la déconnexion de 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } pour 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } importez le bouton de la bibliothèque react native import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; l'écran de l'application devrait ressembler à ceci 3 test tester le bouton, lorsqu'on clique, cela devrait se déconnecter et afficher une alerte et, après, cela devrait revenir à la page de connexion conclusion vous avez maintenant implémenté les principales fonctionnalités d'authentification des utilisateurs nécessaires à toute application vos utilisateurs peuvent désormais s'inscrire, se connecter, naviguer dans la zone authentifiée et se déconnecter de votre application react native en utilisant relay et l'api graphql de back4app