Logout Pengguna React Native dengan Relay dan GraphQL

10 mnt

logout pengguna react native pendahuluan dalam langkah ini, anda akan membuat logout pengguna untuk react native menggunakan relay, implementasi terakhir untuk bagian pengguna ini langkah ini sederhana dan kita akan mengikuti panduan logout graphql https //www back4app com/docs/parse graphql/graphql logout mutation dari buku masak graphql kami anda akan mengimplementasikan mutasi logout dan memanggilnya menggunakan tombol di aplikasi react native kapan saja, anda dapat mengakses proyek ini melalui repositori github kami untuk memeriksa gaya dan kode lengkapnya repositori contoh javascript tujuan untuk mengimplementasikan fitur logout ke dalam aplikasi react native kami menggunakan relay dan api graphql back4app prasyarat untuk tutorial ini kami akan menggunakan parse server versi 4 4 jika anda ingin menggunakan versi lain, anda dapat memeriksa kode mutasi yang sesuai di panduan logout graphql contoh untuk versi anda masing masing anda harus menyelesaikan tutorial pengaturan lingkungan relay anda harus menyelesaikan contoh login react native menggunakan relay anda harus menyelesaikan pengguna react native yang masuk untuk tutorial ini, kami akan menggunakan expo sebagai kerangka kerja react native; untuk tutorial ini, kami akan menggunakan javascript sebagai bahasa implementasi default kami; 1 membuat mutasi logout kembali lagi ke folder signin, ke dalam folder mutasi buat file baru dan beri nama logoutmutation js logoutmutation js salin dan tempel kode berikut di dalam 1 import { commitmutation, graphql } from 'react relay'; 2	 3 const mutation = graphql` 4 mutation logoutmutation($input logoutinput!) { 5 logout(input $input) { 6 clientmutationid 7 } 8 } 9 `; 10	 11 function commit({ environment, input, oncompleted, onerror }) { 12 const variables = { input }; 13	 14 commitmutation(environment, { 15 mutation, 16 variables, 17 oncompleted, 18 onerror, 19 }); 20 } 21	 22 export default { 23 commit, 24 }; jalankan yarn relay yarn relay di terminal anda untuk memperbarui tipe relay 2 membuat tombol logout sekarang, buka formsignin js formsignin js komponen mari kita tambahkan tombol logout dan panggil relay mutation impor relay mutation baru di awal file 1 import logoutmutation from " /mutations/logoutmutation"; kemudian, buat fungsi yang bertanggung jawab untuk memanggil logout mutation 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 }; apa yang terjadi di oncompleted oncompleted itu menghapus token sesi dari async storage karena sudah tidak valid lagi membersihkan usestate lokal yang mengambil token sesi untuk alasan yang sama di atas sebuah alert yang mengatakan pengguna telah berhasil keluar setelah itu, tepat di bawah userloggedrenderer, mari kita implementasikan tombol yang bertanggung jawab untuk memanggil logout dari 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } untuk 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } impor button dari pustaka react native import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; layar aplikasi harus terlihat seperti ini 3 pengujian mengujikan tombol, saat diklik harus melakukan logout dan muncul sebuah peringatan dan, setelah itu harus kembali ke halaman login kesimpulan sekarang anda telah mengimplementasikan fitur otentikasi pengguna utama yang diperlukan untuk setiap aplikasi pengguna anda sekarang dapat mendaftar, masuk, menavigasi di area yang terautentikasi, dan keluar dari aplikasi react native anda menggunakan relay dan back4app graphql api