Implementasi Pendaftaran Pengguna di React Native dengan Relay

pendaftaran pengguna dengan relay pendahuluan hal pertama yang akan dilakukan aplikasi anda mungkin meminta pengguna untuk mendaftar back4app/parse sudah menyediakan secara default kelas user, yang sudah memiliki mutasi graphql siap pakai untuk mendaftar pengguna baru ketika diperlukan untuk aplikasi anda dalam panduan ini, anda akan membuat fitur pendaftaran untuk aplikasi react native menggunakan relay untuk menyimpan data kami di back4app alur kerjanya sangat mirip dengan membuat query renderer setelah implementasi, relay compiler akan memeriksa frontend (fragmen) dan backend (model data) dan mengembalikan jika semuanya cocok jika ya, tipe dan aplikasi sudah siap untuk berkomunikasi dengan backend kapan saja, anda dapat mengakses proyek ini melalui repositori github kami untuk memeriksa gaya dan kode lengkapnya https //github com/templates back4app/react native graphql relay js users tujuan di akhir panduan ini, anda akan memiliki aplikasi react native dengan fitur pendaftaran pengguna yang diimplementasikan seperti yang ditunjukkan di bawah prasyarat sebuah aplikasi yang dibuat di back4app menggunakan https //www back4app com/docs/platform/parse server version atau lebih anda harus menyelesaikan https //www back4app com/docs/react native/graphql/relay setup untuk tutorial ini kita akan menggunakan expo sebagai kerangka kerja react native; untuk tutorial ini kita akan menggunakan javascript sebagai bahasa implementasi default kita; untuk tutorial ini kita akan menggunakan contoh style css kita; 1 membuat form pendaftaran jika aplikasi sudah memiliki komponen form, lanjutkan ke langkah 2 jika tidak, silakan ikuti template kami kami akan menggunakan aplikasi expo yang memiliki form dengan nama pengguna dan kata sandi untuk mempermudah hidup kita, kita akan menggunakan beberapa pustaka pihak ketiga untuk membantu membangun fitur pendaftaran komponen form kami akan menggunakan pustaka formik penting untuk dicatat bahwa ini tidak menyimpulkan hasil akhir instal formik yarn add formik buat komponen baru dan beri nama formsignup js formsignup js tempelkan kode berikut di dalamnya 1 import react, { usestate } from 'react'; 2 import { button, text, textinput, view, touchableopacity } from "react native"; 3 import { useformik, formikprovider } from 'formik'; 4 import styles from " / /style" 5 import environment from ' / /relay/environment'; 6&#x9; 7 const signup = () => { 8 const \[usercreated, setusercreated] = usestate(); 9&#x9; 10 const onsubmit = (values) => { 11 // @todo the mutation will be implemented here 12 }; 13&#x9; 14 const formikbag = useformik({ 15 initialvalues { 16 username '', 17 password '', 18 }, 19 onsubmit, 20 }); 21&#x9; 22 const { handlesubmit, setfieldvalue } = formikbag; 23 if (usercreated? id) { 24 return ( 25 \<view style={ {margintop 15, alignitems 'center'} }> 26 \<text>user {usercreated name} created\</text> 27 \</view> 28 ); 29 } 30&#x9; 31 return ( 32 \<formikprovider value={formikbag}> 33 \<view style={styles login wrapper}> 34 \<view style={styles form}> 35 \<text>username\</text> 36 \<textinput 37 name={"username"} 38 style={styles form input} 39 autocapitalize="none" 40 onchangetext={(text) => setfieldvalue("username", text)} 41 /> 42 \<text>password\</text> 43 \<textinput 44 style={styles form input} 45 name={"password"} 46 autocapitalize="none" 47 securetextentry 48 onchangetext={(text) => setfieldvalue("password", text)} 49 /> 50 \<touchableopacity onpress={() => handlesubmit()}> 51 \<view style={styles button}> 52 \<text style={styles button label}>{"sign in"}\</text> 53 \</view> 54 \</touchableopacity> 55 \</view> 56 \</view> 57 \</formikprovider> 58 ); 59 }; 60&#x9; 61 export default signup; aplikasi seharusnya berjalan dengan baik sampai di sini formulir seharusnya terlihat seperti ini mari kita tempatkan komponen kita dengan menjelaskan beberapa poin kami menggunakan formik untuk mengontrol nilai formulir kami anda juga dapat menggunakan formulir dengan html, css, dan js styled components akan digunakan untuk memberikan gaya css sederhana untuk komponen ada state yang digunakan untuk mengontrol apakah pengguna kami terdaftar atau tidak silakan, lihat fungsi onsubmit perhatikan bahwa relay mutation akan berada di dalam fungsi ini sekali lagi, tidak masalah jika aplikasi tidak menggunakan formik setelah kami menerapkan komponen form, relay mutation hanya perlu dipanggil di dalam fungsi submit 2 membuat mutasi dengan menggunakan prinsip kolokasi, mari kita buat folder baru yang paling dekat dengan komponen form namai sebagai mutations mutations untuk mengingat tentang kolokasi, anda dapat mengunjungi dokumen kami https //www back4app com/docs/react native/graphql/get started relay graphql , di mana kami memberikan penjelasan singkat tentangnya sebagai contoh bagaimana menangani kolokasi, pada gambar di bawah ini komponen signup dibungkus oleh sebuah folder di dalam folder ini adalah tempat kita akan membuat folder mutations mutations dan, di dalam folder mutations mutations ini, kita akan membuat mutasi relay ini bekerja dengan sempurna pada proyek besar segala sesuatu yang terkait dengan komponen akan ditempatkan dekat dengannya dan akan lebih mudah untuk dikerjakan, ditemukan, dll gunakan pendekatan ini untuk setiap mutasi baru dari aplikasi setiap kali letakkan dekat dengan komponen yang akan menggunakannya di dalam folder ini, anda akan membuat file baru bernama signupmutation js signupmutation js sesuai dengan panduan terakhir kami di mana kami menjelaskan mutasi relay, anda akan membuat sebuah fungsi di dalamnya dan menyebutnya commit anda dapat menggunakan kode di bawah ini 1 function commit({ environment, input, oncompleted, onerror }) { 2 const variables = { input }; 3&#x9; 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11&#x9; 12 export default { 13 commit, 14 }; sebelum kembali ke komponen formulir, mari kita buat variabel kita yang akan menerima fragment graphql, yang mewakili mutasi fragment graphql adalah apa yang akan dibaca dan dicocokkan oleh relay compiler dengan schema graphql sebelum commitmutation, salin dan tempel kode berikut 1 const mutation = graphql` 2 mutation signupmutation($input signupinput!) { 3 signup(input $input) { 4 viewer { 5 user { 6 id 7 username 8 createdat 9 } 10 sessiontoken 11 } 12 } 13 } 14 `; file akhir 1 import {commitmutation, graphql} from 'react relay'; 2&#x9; 3 const mutation = graphql` 4 mutation signupmutation($input signupinput!) { 5 signup(input $input) { 6 viewer { 7 user { 8 id 9 username 10 createdat 11 } 12 sessiontoken 13 } 14 } 15 } 16 `; 17&#x9; 18 function commit({environment, input, oncompleted, onerror}) { 19 const variables = {input}; 20&#x9; 21 commitmutation(environment, { 22 mutation, 23 variables, 24 oncompleted, 25 onerror, 26 }); 27 } 28&#x9; 29 export default { 30 commit, 31 }; karena fragment graphql mewakili backend, untuk mendapatkan kode relay mutation, anda dapat pergi ke https //www back4app com/docs/react native/graphql/users/back4app com/docs/parse graphql/graphql sign up dan temukan fragment jalankan yarn relay yarn relay untuk menghasilkan mutasi baru dan memperbarui file jika semuanya baik baik saja, tipe mutasi akan dihasilkan dan anda dapat melanjutkan 3 implementasikan fungsi saat dikirim langkah pengiriman adalah yang paling penting di sinilah keajaiban relay mutation terjadi langkah ini mendapatkan nilai dari formulir dari formik jika aplikasi tidak menggunakan formik, nilai nilai tersebut harus tersedia di sini terlepas dari cara mereka mendapatkannya kembali ke komponen form, mari kita mulai implementasi relay mutation impor mutasi 1 import signupmutation from ' /mutations/signupmutation'; di dalam fungsi onsubmit, mulai membuat variabel input 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } nilai nilai diinjeksikan oleh formik di sini, jika anda tidak menggunakan formik, nilai nilai kemungkinan akan datang melalui osubmit asli dari formulir atau sesuai preferensi anda akhirnya, panggil mutation dengan melewatkan semua props (ingat untuk mengimpornya) 1 signupmutation commit({ 2 environment, 3 input, 4 oncompleted ({signup}) => { 5 const { viewer } = signup; 6 const { sessiontoken, user } = viewer; 7&#x9; 8 if (sessiontoken !== null) { 9 alert(`user ${user username} successfully created`); 10 setusercreated(user); 11 return; 12 } 13 }, 14 onerror (errors) => { 15 alert(errors\[0] message); 16 }, 17 }); hasil akhir dari onsubmit 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10&#x9; 11 signupmutation commit({ 12 environment, 13 input, 14 oncompleted ({signup}) => { 15 const { viewer } = signup; 16 const { sessiontoken, user } = viewer; 17 18 if (sessiontoken !== null) { 19 alert(`user ${user username} successfully created`); 20 setusercreated(user); 21 return; 22 } 23 }, 24 onerror (errors) => { 25 alert(errors\[0] message); 26 }, 27 }); 28 }; jalankan proyek anda, daftarkan pengguna anda dan kemudian periksa di dasbor back4app mutation akan mengembalikan nilai nilai dari server setelah token sesi dikembalikan, aplikasi dapat mulai mengelolanya menangani kesalahan pada mutasi komit, aplikasi dapat menangani kesalahan pada onerror selalu akan menerima array kesalahan yang paling umum adalah array ini hanya memiliki satu objek yang berisi pesan kesalahan lihat contoh di bawah ini 1 { 2 "errors" \[ 3 { 4 "message" "akun sudah ada untuk nama pengguna ini ", 5 "locations" \[ 6 { 7 "line" 2, 8 "column" 3 9 } 10 ], 11 "path" \[ 12 "signup" 13 ], 14 "extensions" { 15 "code" 202 16 } 17 } 18 ], 19 "data" { 20 "signup" null 21 } 22 } berdasarkan contoh ini, silakan buat penanganan kesalahan anda sendiri saat ini, jika ada kesalahan yang dikembalikan, kami hanya menampilkannya dengan sebuah alert 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, kesimpulan anda sekarang memiliki aplikasi dengan fitur pendaftaran yang sepenuhnya berfungsi dalam panduan berikutnya, anda akan memahami cara mengautentikasi pengguna (masuk) dan mengeluarkannya menggunakan pendekatan yang sama anda juga akan menggunakan relay mutations untuk memanggil backend kami