Implementasi Relay untuk Mengambil Pengguna Saat Ini di React Native

11 mnt

dapatkan pengguna saat ini menggunakan relay untuk aplikasi react native pendahuluan setelah menerapkan pendaftaran pengguna dan login ke aplikasi react native anda menggunakan relay, anda perlu mengambil data pengguna yang sedang login saat ini untuk melakukan berbagai tindakan dan permintaan dalam panduan ini, kita akan mengikuti panduan masak graphql untuk mendapatkan pengguna yang login https //www back4app com/docs/parse graphql/graphql get current user dan query renderer https //www back4app com/docs/react native/graphql/relay query renderer untuk mengambil informasi tentang pengguna saat ini kueri sebagai graphql direpresentasikan sebagai 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } kapan saja, anda dapat mengakses proyek ini melalui repositori github kami untuk memeriksa gaya dan kode lengkapnya repositori contoh javascript tujuan buat komponen untuk mendapatkan informasi tentang pengguna saat ini prasyarat sebuah aplikasi yang dibuat di back4app menggunakan parse server versi 3 10 atau lebih anda harus menyelesaikan tutorial pengaturan relay environment 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; kapan saja, anda dapat mengakses proyek ini melalui repositori github kami untuk memeriksa gaya dan kode lengkapnya repositori contoh javascript 1 membuat komponen user logged di folder komponen signin, buat file baru dan beri nama userloggedrenderer js userloggedrenderer js di dalam userloggedrenderer js userloggedrenderer js , mari kita buat komponen yang sangat mirip dengan tutorial query renderer, tetapi dalam kasus ini, hanya query renderer yang dibutuhkan dengan token sesi yang valid dalam aplikasi, komponen akan dipanggil dan akan mendapatkan informasi pengguna saat ini komponen query renderer akan terlihat seperti berikut 1 return ( 2 \<queryrenderer 3 environment={environment} 4 query={// @todo implement the query necessary} 5 variables={null} 6 render={({error, props}) => { 7 if (error) { 8 return ( 9 \<view> 10 \<text>{error message}\</text> 11 \</view> 12 ); 13 } else if (props) { 14 // @todo implement a funcion to render the viewer 15 } 16 return ( 17 \<view> 18 \<text>loading\</text> 19 \</view> 20 ); 21 }} 22 /> 23 ); @todo pertama harus diimplementasikan dengan kueri untuk mengambil informasi dari pengguna yang masuk kueri yang digunakan untuk operasi ini dijelaskan di panduan get user logged graphql cookbook https //www back4app com/docs/parse graphql/graphql get current user 1 graphql` 2 query userloggedrendererquery { 3 viewer { 4 user { 5 id 6 createdat 7 updatedat 8 username 9 } 10 sessiontoken 11 } 12 } 13	 @todo kedua harus diimplementasikan dengan fungsi yang akan merender informasi tentang pengguna hanya jika ada jika tidak ada kesalahan, kita akan mengembalikan rendercontent rendercontent fungsi yang dijelaskan di bawah ini fungsi ini akan merender informasi pengguna saat ini (email dan nama pengguna) dengan cara yang aman 1 const rendercontent = (viewer) => { 2 if (!viewer? user) { 3 return null; 4 } 5	 6 const {user} = viewer; 7	 8 return ( 9 \<view style={ {margintop 15, alignitems 'center'} }> 10 \<text>user {user? username || user? email} logged\</text> 11 \</view> 12 ); 13 }; anda harus mengimplementasikan fungsi sebelum komponen queryrenderer hasil akhir dari komponen harus terlihat seperti ini 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import environment from ' / /relay/environment'; 4 import {text, view} from 'react native'; 5	 6 const userloggedrenderer = () => { 7 const rendercontent = (viewer) => { 8 if (!viewer? user) { 9 return null; 10 } 11	 12 const {user} = viewer; 13	 14 return ( 15 \<view style={ {margintop 15, alignitems 'center'} }> 16 \<text>user {user? username || user? email} logged\</text> 17 \</view> 18 ); 19 }; 20	 21 return ( 22 \<queryrenderer 23 environment={environment} 24 query={graphql` 25 query userloggedrendererquery { 26 viewer { 27 user { 28 id 29 createdat 30 updatedat 31 username 32 } 33 sessiontoken 34 } 35 } 36 `} 37 variables={null} 38 render={({error, props}) => { 39 if (error) { 40 return ( 41 \<view> 42 \<text>{error message}\</text> 43 \</view> 44 ); 45 } else if (props) { 46 return rendercontent(props viewer); 47 } 48 return ( 49 \<view> 50 \<text>loading\</text> 51 \</view> 52 ); 53 }} 54 /> 55 ); 56 }; 57	 58 export default userloggedrenderer; 2 mengimpor userloggedrenderer ke dalam komponen signin kembali ke komponen formsignin, ganti kode yang mengembalikan informasi pengguna saat ini dengan komponen user logged yang baru dari 1 if (sessiontoken) { 2 console warn(sessiontoken); 3 return ( 4 \<view style={ { margintop 15, alignitems 'center' } }> 5 \<text>user logged\</text> 6 \</view> 7 ); 8 } ke 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } jangan lupa untuk mengimpor userloggedrenderer userloggedrenderer 1 import userloggedrenderer from ' /userloggedrenderer'; sekarang jalankan yarn relay yarn relay perintah untuk memperbarui dengan kueri baru yarn relay yarn relay sekarang, akan ditampilkan nama pengguna atau email dengan token sesi yang valid jika tidak, komponen tidak akan dirender dan, proses login akan berjalan juga, usestate userlogged userlogged dapat dihapus dari kode yang tidak masuk akal lagi jangan lupa untuk menghapusnya dari fungsi oncompleted ke dalam mutasi login kesimpulan hasil akhir dari langkah ini harus sama dengan yang terakhir info tentangnya akan ditampilkan tetapi sekarang diikuti oleh nama pengguna atau email di dokumen berikutnya, mari kita buat tombol untuk melakukan logout pengguna ini dan membersihkan sesi, mengembalikan aplikasi untuk alur login atau pendaftaran