Implementa Logout Utente in React Native con GraphQL Relay

disconnessione utente react native introduzione in questo passaggio creerai la disconnessione dell'utente per react native utilizzando relay, l'ultima implementazione per questa sezione dell'utente questo passaggio è semplice e seguiremo la nostra https //www back4app com/docs/parse graphql/graphql logout mutation dal nostro cookbook graphql implementerai la mutazione di disconnessione e la chiamerai utilizzando un pulsante nell'applicazione react native in qualsiasi momento, puoi accedere a questo progetto tramite i nostri repository github per controllare gli stili e il codice completo https //github com/templates back4app/react native graphql relay js users obiettivo per implementare la funzionalità di logout nella nostra app react native utilizzando relay e l'api graphql di back4app prerequisiti per questo tutorial utilizzeremo il parse server nella versione 4 4 se desideri utilizzare altre versioni, puoi controllare il codice di mutazione corrispondente a https //www back4app com/docs/parse graphql/graphql logout mutation esempio per la tua rispettiva versione devi concludere il https //www back4app com/docs/react native/graphql/relay setup devi concludere il https //www back4app com/docs/react native/graphql/users/react native login sample devi concludere il https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr per questo tutorial, utilizzeremo expo come framework react native; per questo tutorial, utilizzeremo javascript come nostro linguaggio di implementazione predefinito; 1 creazione della mutazione di logout tornando nella cartella signin, all'interno della cartella delle mutazioni crea un nuovo file e chiamalo logoutmutation js logoutmutation js copia e incolla il seguente codice all'interno 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 }; esegui yarn relay yarn relay nel tuo terminale per aggiornare i tipi di relay 2 creazione del pulsante di disconnessione ora, apri il formsignin js formsignin js componente aggiungiamo il pulsante di disconnessione e chiamiamo la mutazione relay importa la nuova mutazione relay all'inizio del file 1 import logoutmutation from " /mutations/logoutmutation"; poi, crea la funzione responsabile di chiamare la mutazione logout 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 }; cosa sta succedendo in oncompleted oncompleted sta rimuovendo il token di sessione da async storage perché non è più valido sta pulendo il usestate locale che recupera il token di sessione per lo stesso motivo sopra un avviso che dice che l'utente è stato disconnesso con successo dopo, subito sotto il userloggedrenderer, implementiamo il pulsante responsabile di chiamare il logout da 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } per 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } importa il pulsante dalla libreria react native import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; lo schermo dell'applicazione dovrebbe apparire così 3 test testando il pulsante, quando cliccato dovrebbe effettuare il logout e apparire un avviso e, dopo, dovrebbe tornare alla pagina di accesso conclusione ora hai implementato le principali funzionalità di autenticazione degli utenti necessarie per qualsiasi app i tuoi utenti possono ora registrarsi, accedere, navigare nell'area autenticata e disconnettersi dalla tua app react native utilizzando relay e l'api graphql di back4app