React Native: Benutzerabmeldung mit GraphQL-Relay

react native benutzerabmeldung einführung in diesem schritt werden sie die benutzerabmeldung für react native mit relay erstellen, die letzte implementierung für diesen benutzerbereich dieser schritt ist einfach und wir werden unserem https //www back4app com/docs/parse graphql/graphql logout mutation aus unserem graphql kochbuch folgen sie werden die abmelde mutation implementieren und sie über einen button in der react native anwendung aufrufen zu jeder zeit können sie auf dieses projekt über unsere github repositories zugreifen, um die stile und den vollständigen code zu überprüfen https //github com/templates back4app/react native graphql relay js users ziel um die logout funktion in unsere react native app mit relay und der back4app graphql api zu implementieren voraussetzungen für dieses tutorial verwenden wir den parse server in der version 4 4 wenn sie andere versionen verwenden möchten, können sie den entsprechenden mutationscode unter https //www back4app com/docs/parse graphql/graphql logout mutation als beispiel für ihre jeweilige version überprüfen sie müssen das https //www back4app com/docs/react native/graphql/relay setup sie müssen das https //www back4app com/docs/react native/graphql/users/react native login sample sie müssen das https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr für dieses tutorial verwenden wir expo als react native framework; für dieses tutorial verwenden wir javascript als unsere standardimplementierungssprache; 1 erstellen der logout mutation zurück im signin ordner, erstellen sie im ordner mutationen eine neue datei und nennen sie sie logoutmutation js logoutmutation js kopiere und füge den folgenden code ein 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 }; führe yarn relay yarn relay in deinem terminal aus, um die relay typen zu aktualisieren 2 erstellen des logout buttons öffne jetzt die formsignin js formsignin js komponente lass uns den logout button hinzufügen und die relay mutation aufrufen importiere die neue relay mutation am anfang der datei 1 import logoutmutation from " /mutations/logoutmutation"; erstelle dann die funktion, die für den aufruf der logout mutation verantwortlich ist 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 }; was passiert bei oncompleted oncompleted es entfernt das sitzungstoken aus dem async storage, da es nicht mehr gültig ist es bereinigt den lokalen usestate, der das sitzungstoken aus dem oben genannten grund abruft eine benachrichtigung, die besagt, dass der benutzer erfolgreich abgemeldet wurde danach, direkt unter dem userloggedrenderer, lassen sie uns den button implementieren, der für den logout verantwortlich ist von 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } um 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } importieren sie den button aus der react native bibliothek import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; der anwendungsbildschirm sollte so aussehen 3 testen beim testen des buttons sollte beim klicken die abmeldung erfolgen und eine warnung erscheinen und danach sollte man zur anmeldeseite zurückkehren fazit jetzt haben sie die wichtigsten funktionen zur benutzerauthentifizierung implementiert, die für jede app erforderlich sind ihre benutzer können sich jetzt registrieren, anmelden, im authentifizierten bereich navigieren und sich aus ihrer react native app mit relay und back4app graphql api abmelden