Membangun Relasi Objek Data di Parse Menggunakan React

hubungan pendahuluan dengan menggunakan parse, anda dapat menyimpan objek data yang membangun hubungan di antara mereka untuk memodelkan perilaku ini, setiap parseobject parseobject dapat digunakan sebagai nilai dalam parseobject parseobject secara internal, kerangka kerja parse akan menyimpan objek yang dirujuk hanya di satu tempat, untuk menjaga konsistensi itu dapat memberi anda kekuatan tambahan saat membangun dan menjalankan kueri yang kompleks ada tiga jenis hubungan utama satu ke banyak satu ke banyak , di mana satu objek dapat terkait dengan banyak objek lainnya; banyak ke banyak banyak ke banyak , yang dapat menciptakan banyak hubungan kompleks antara banyak objek satu ke satu satu ke satu , yang membangun hubungan langsung antara dua objek dan hanya mereka; ada dua cara untuk membuat hubungan satu ke banyak satu ke banyak di parse (direkomendasikan) yang pertama adalah menggunakan parse pointers parse pointers di kelas anak, yang merupakan yang tercepat dalam waktu pembuatan dan kueri kita akan menggunakan ini dalam panduan ini yang kedua adalah menggunakan array array dari parse pointers parse pointers di kelas induk yang dapat menyebabkan waktu kueri yang lambat tergantung pada ukuran mereka karena masalah kinerja ini, kita hanya akan menggunakan contoh pointer ada tiga cara untuk membuat hubungan banyak ke banyak banyak ke banyak di parse (direkomendasikan) yang pertama adalah menggunakan parse relations parse relations , yang merupakan yang tercepat dalam waktu pembuatan dan kueri kita akan menggunakan ini dalam panduan ini yang kedua adalah menggunakan arrays arrays dari parse pointers parse pointers yang dapat menyebabkan waktu kueri yang lambat tergantung pada ukuran mereka yang ketiga adalah menggunakan jointable jointable di mana ide berasal dari basis data klasik ketika ada hubungan banyak ke banyak, kita menggabungkan setiap objectid objectid atau pointer pointer dari kedua sisi bersama sama untuk membangun tabel terpisah baru di mana hubungan dilacak dalam panduan ini, anda akan mengimplementasikan aplikasi pendaftaran buku react yang berisi tiga jenis asosiasi data utama anda akan belajar bagaimana cara membuat dan mengkueri hubungan data menggunakan back4app dan react kapan saja, anda dapat mengakses proyek ini melalui repositori github kami untuk memeriksa gaya dan kode lengkap repositori contoh javascript repositori contoh typescript prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi react yang dibuat dan terhubung ke back4app jika anda ingin menjalankan proyek contoh panduan ini, anda harus menyiapkan ant design ant design pustaka tujuan untuk melakukan dan mendemonstrasikan hubungan basis data di react menggunakan parse dalam skenario yang realistis 1 memahami kelas buku karena dalam panduan ini kita akan menggunakan contoh aplikasi pendaftaran buku, anda perlu terlebih dahulu memahami bagaimana hubungan objek diatur dalam basis data ini kelas objek utama yang akan anda gunakan adalah buku buku kelas, yang akan menyimpan setiap entri buku dalam pendaftaran ini adalah empat kelas objek lainnya penerbit penerbit nama penerbit buku, hubungan satu ke banyak dengan buku buku ; genre genre genre buku, hubungan satu ke banyak dengan buku buku perhatikan bahwa untuk contoh ini kita akan menganggap bahwa sebuah buku hanya dapat memiliki satu genre; penulis penulis penulis buku, hubungan banyak ke banyak dengan buku buku , karena sebuah buku dapat memiliki lebih dari satu penulis dan seorang penulis juga dapat memiliki lebih dari satu buku; isdb isdb nomor identifikasi isdb buku, hubungan satu ke satu dengan buku buku , karena nomor ini unik untuk setiap buku berikut adalah representasi visual dari tabel basis data ini untuk kesederhanaan, kami akan mengasumsikan bahwa setiap kelas objek hanya memiliki atribut tipe string nama nama ( judul judul untuk buku buku ), selain atribut relasional tambahan langkah 2 membuat hubungan sebelum masuk ke langkah ini, kami sarankan anda untuk mengkloning dan menjalankan contoh aplikasi react ( repositori contoh javascript , repositori contoh typescript ) aplikasi ini memiliki dua layar utama satu bertanggung jawab untuk mencantumkan buku yang terdaftar dan yang lainnya untuk membuat buku baru dalam formulir pendaftaran buku, terdapat tautan langsung ke objek terkait lainnya dan bidang input teks yang ditugaskan untuk nilai isbd buku, yang akan digunakan untuk membuat hubungan satu ke satu mari kita lihat metode pembuatan buku yang dipanggil saat mengirimkan formulir ini javascript 1 const createbook = async function () { 2 try { 3 // these values come from state variables linked to 4 // the screen form fields, retrieving the user choices 5 // as a complete parse object, when applicable; 6 const booktitlevalue = booktitle; 7 const bookisbdvalue = bookisbd; 8 // for example, bookpublisher holds the value from 9 // radiogroup field with its options being every 10 // publisher parse object instance saved on server, which is 11 // queried on screen load via useeffect 12 const bookpublisherobject = bookpublisher; 13 const bookgenreobject = bookgenre; 14 // bookauthors can be an array of parse objects, since the book 15 // may have more than one author 16 const bookauthorsobjects = bookauthors; 17 18 // creates a new parse object instance 19 let book = new parse object('book'); 20 21 // set data to parse object 22 // simple title field 23 book set('title', booktitlevalue); 24 25 // one to one (1 1) 26 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 27 let isbdquery = new parse query('isbd'); 28 isbdquery equalto('name', bookisbdvalue); 29 let isbdqueryresult = await isbdquery first(); 30 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 31 // if first returns a valid object instance, it means that there 32 // is at least one instance of isbd with the informed value 33 alert( 34 'error! there is already an isbd instance with this value!', 35 ); 36 return false; 37 } else { 38 // create a new isbd object instance to create a one to one relation on saving 39 let isbd = new parse object('isbd'); 40 isbd set('name', bookisbdvalue); 41 isbd = await isbd save(); 42 // set the new object to the new book object isbd field 43 book set('isbd', isbd); 44 } 45 46 // one to many (1\ n) 47 // one to many relations can be set in two ways 48 // add direct object to field (parse will convert to pointer on save) 49 book set('publisher', bookpublisherobject); 50 // or add pointer to field 51 book set('genre', bookgenreobject topointer()); 52 53 // many to many (n\ n) 54 // create a new relation so data can be added 55 let authorsrelation = book relation('authors'); 56 // bookauthorsobjects is an array of parse objects, 57 // you can add to relation by adding the whole array or object by object 58 authorsrelation add(bookauthorsobjects); 59 60 // after setting the values, save it on the server 61 try { 62 await book save(); 63 // success 64 alert('success!'); 65 // navigate back to home screen using react router 66 history push('/'); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert(`error! ${error message}`); 71 return false; 72 } 73 } catch (error) { 74 // error can be caused by lack of value selection 75 alert( 76 'error! make sure to select valid choices in publisher, genre and author fields!', 77 ); 78 return false; 79 } 80 }; typescript 1 const createbook = async function () promise\<boolean> { 2 try { 3 // these values come from state variables linked to 4 // the screen form fields, retrieving the user choices 5 // as a complete parse object, when applicable; 6 const booktitlevalue string = booktitle; 7 const bookisbdvalue string = bookisbd; 8 // for example, bookpublisher holds the value from 9 // radiobutton group field with its options being every 10 // publisher parse object instance saved on server, which is 11 // queried on screen load via useeffect 12 const bookpublisherobject parse object = bookpublisher; 13 const bookgenreobject parse object = bookgenre; 14 // bookauthors can be an array of parse objects, since the book 15 // may have more than one author 16 const bookauthorsobjects \[parse object] = bookauthors; 17 18 // creates a new parse object instance 19 let book parse object = new parse object('book'); 20 21 // set data to parse object 22 // simple title field 23 book set('title', booktitlevalue); 24 25 // one to one (1 1) 26 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 27 let isbdquery parse query = new parse query('isbd'); 28 isbdquery equalto('name', bookisbdvalue); 29 let isbdqueryresult parse object = await isbdquery first(); 30 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 31 // if first returns a valid object instance, it means that there 32 // is at least one instance of isbd with the informed value 33 alert( 34 'error! there is already an isbd instance with this value!', 35 ); 36 return false; 37 } else { 38 // create a new isbd object instance to create a one to one relation on saving 39 let isbd parse object = new parse object('isbd'); 40 isbd set('name', bookisbdvalue); 41 isbd = await isbd save(); 42 // set the new object to the new book object isbd field 43 book set('isbd', isbd); 44 } 45 46 // one to many (1\ n) 47 // one to many relations can be set in two ways 48 // add direct object to field (parse will convert to pointer on save) 49 book set('publisher', bookpublisherobject); 50 // or add pointer to field 51 book set('genre', bookgenreobject topointer()); 52 53 // many to many (n\ n) 54 // create a new relation so data can be added 55 let authorsrelation = book relation('authors'); 56 // bookauthorsobjects is an array of parse objects, 57 // you can add to relation by adding the whole array or object by object 58 authorsrelation add(bookauthorsobjects); 59 60 // after setting the values, save it on the server 61 try { 62 await book save(); 63 // success 64 alert('success!'); 65 // navigate back to home screen using react router 66 history push('/'); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert(`error! ${error message}`); 71 return false; 72 } 73 } catch (error) { 74 // error can be caused by lack of value selection 75 alert( 76 'error! make sure to select valid choices in publisher, genre and author fields!', 77 ); 78 return false; 79 } 80 }; mari kita lihat secara terpisah bagaimana tiga jenis asosiasi dilakukan saat membuat objek buku buku objek hubungan satu ke banyak perhatikan bagaimana bookpublisherobject bookpublisherobject dan bookgenreobject bookgenreobject diatur ke buku baru parse object parse object instance lihat betapa mudahnya di parse untuk membuat hubungan satu ke banyak anda bisa menetapkan instance objek target atau pointer ke objek tersebut menggunakan parse object set parse object set metode, yang mengambil dua argumen nama field dan nilai yang akan diatur parse akan membuat kolom tipe data pointer dan tautan langsung di dasbor anda untuk akses cepat di belakang layar hubungan banyak ke banyak lihat bagaimana bookauthorsobjects bookauthorsobjects diatur ke buku baru parse object parse object instance untuk membuat hubungan banyak ke banyak, anda pertama tama perlu membuat parse object relation parse object relation baru dan kemudian menambahkan objek terkait ke dalamnya satu per satu atau dengan mengirimkan array dari parse object parse object menggunakan parse object relation add parse object relation add metode parse akan membuat kolom tipe hubungan dan juga tabel relasional di database anda parse juga akan membuat tautan untuk akses mudah ke tabel baru ini di kolom field di dasbor hubungan satu satu lihat bagaimana bookisbdvalue bookisbdvalue diatur ke buku baru parse objec parse objec t instance membuat dan menyimpan hubungan satu satu dan satu banyak di parse adalah proses yang mirip, di mana anda mengoper sebagai argumen parse object parse object instance menggunakan parse object set parse object set metode, yang mengambil dua argumen nama field dan nilai yang akan diatur masalah di sini adalah, sebelum menyimpan, anda perlu memastikan bahwa tidak ada isbd isbd objek yang mengandung nilai string id isbd yang diinformasikan di database anda dan bahwa tidak ada buku buku objek yang sudah terkait dengannya juga bagian kedua akan selalu benar dalam kasus ini, karena anda membuat objek buku buku baru setiap kali memastikan isbd isbd keunikan dapat dicapai dengan menggunakan kueri yang disorot berikut javascript 1 let isbdquery = new parse query('isbd'); 2 isbdquery equalto('name', bookisbdvalue); 3 let isbdqueryresult = await isbdquery first(); 4 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 5 // if first returns a valid object instance, it means that there 6 // is at least one instance of isbd with the informed value 7 alert( 8 'error! there is already an isbd instance with this value!', 9 ); 10 return false; 11 } typescript 1 let isbdquery parse query = new parse query('isbd'); 2 isbdquery equalto('name', bookisbdvalue); 3 let isbdqueryresult parse object = await isbdquery first(); 4 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 5 // if first returns a valid object instance, it means that there 6 // is at least one instance of isbd with the informed value 7 alert( 8 'error! there is already an isbd instance with this value!', 9 ); 10 return false; 11 } setelah berhasil menyimpan objek anda, parse akan membuat kolom tipe data pointer dan tautan langsung di dasbor anda juga 3 menanyakan hubungan menanyakan objek terkait cukup sederhana karena sebagian besar ditangani oleh parse lihat fungsi kueri di layar daftar buku dan setelah itu kami akan menyoroti bagaimana setiap jenis hubungan ditanyakan javascript 1 const querybooks = async function () { 2 // these values come from state variables linked to 3 // the screen query radiobutton group fields, with its options being every 4 // parse object instance saved on server from the referred class, which is 5 // queried on screen load via useeffect; these variables retrievie the user choices 6 // as a complete parse object; 7 const querypublishervalue = querypublisher; 8 const querygenrevalue = querygenre; 9 const queryauthorvalue = queryauthor; 10 const queryisbdvalue = queryisbd; 11 12 // reading parse objects is done by using parse query 13 const parsequery = new parse query('book'); 14 15 // one to many queries 16 if (querypublishervalue !== '') { 17 parsequery equalto('publisher', querypublishervalue); 18 } 19 if (querygenrevalue !== '') { 20 parsequery equalto('genre', querygenrevalue); 21 } 22 23 // one to one query 24 if (queryisbdvalue !== '') { 25 parsequery equalto('isbd', queryisbdvalue); 26 } 27 28 // many to many query 29 // in this case, we need to retrieve books related to the chosen author 30 if (queryauthorvalue !== '') { 31 parsequery equalto('authors', queryauthorvalue); 32 } 33 34 try { 35 let books = await parsequery find(); 36 // many to many objects retrieval 37 // in this example we need to get every related author parse object 38 // and add it to our query result objects 39 for (let book of books) { 40 // this query is done by creating a relation and querying it 41 let bookauthorsrelation = book relation('authors'); 42 book authorsobjects = await bookauthorsrelation query() find(); 43 } 44 setqueriedbooks(books); 45 return true; 46 } catch (error) { 47 // error can be caused by lack of internet connection 48 alert(`error! ${error message}`); 49 return false; 50 } 51 }; typescript 1 const querybooks = async function () promise\<boolean> { 2 // these values come from state variables linked to 3 // the screen query radiobutton group fields, with its options being every 4 // parse object instance saved on server from the referred class, which is 5 // queried on screen load via useeffect; these variables retrievie the user choices 6 // as a complete parse object; 7 const querypublishervalue parse object = querypublisher; 8 const querygenrevalue parse object = querygenre; 9 const queryauthorvalue parse object = queryauthor; 10 const queryisbdvalue parse object = queryisbd; 11 12 // reading parse objects is done by using parse query 13 const parsequery parse query = new parse query('book'); 14 15 // one to many queries 16 if (querypublishervalue !== '') { 17 parsequery equalto('publisher', querypublishervalue); 18 } 19 if (querygenrevalue !== '') { 20 parsequery equalto('genre', querygenrevalue); 21 } 22 23 // one to one query 24 if (queryisbdvalue !== '') { 25 parsequery equalto('isbd', queryisbdvalue); 26 } 27 28 // many to many query 29 // in this case, we need to retrieve books related to the chosen author 30 if (queryauthorvalue !== '') { 31 parsequery equalto('authors', queryauthorvalue); 32 } 33 34 try { 35 let books \[parse object] = await parsequery find(); 36 // many to many objects retrieval 37 // in this example we need to get every related author parse object 38 // and add it to our query result objects 39 for (let book of books) { 40 // this query is done by creating a relation and querying it 41 let bookauthorsrelation = book relation('authors'); 42 book authorsobjects = await bookauthorsrelation query() find(); 43 } 44 setqueriedbooks(books); 45 return true; 46 } catch (error) { 47 // error can be caused by lack of internet connection 48 alert(`error! ${error message}`); 49 return false; 50 } 51 }; kueri satu ke banyak untuk menanyakan buku buku yang terkait dengan penerbit atau genre tertentu, anda perlu melakukan parse query equalt parse query equalt metode dengan melewatkan parse object parse object instance sebagai parameter setelah melakukan query, parse akan menyimpan di dalam objek hasil instansi lengkap dari setiap bidang relasional satu ke banyak untuk mengambil dan menampilkan data dari instansi objek ini, anda dapat menghubungkan parse object get parse object get metode seperti ini bookparseobject get(('publisher') get('name') bookparseobject get(('publisher') get('name') kueri banyak ke banyak untuk mengkueri buku buku yang terkait dengan penulis tertentu, kueri juga akan menggunakan hanya metode parse query equalto parse query equalto namun, setelah melakukan kueri, parse tidak akan menyimpan parse object parse object instance dari bidang relasional banyak ke banyak, hanya referensi ke nama kelas terkait, seperti {" type" "relation", "classname" "author"} {" type" "relation", "classname" "author"} untuk mengambil dan menampilkan data dari instance objek ini, anda perlu membuat relasi dan mengkuerinya lagi, menyimpan hasilnya dalam array objek milik anda sendiri kueri satu ke satu sama seperti sebelumnya, untuk mengkueri buku buku yang terkait dengan isbd tertentu, anda perlu melakukan metode parse query equalto parse query equalto dengan melewatkan parse object parse object instance sebagai parameter setelah melakukan kueri, parse akan menyimpan di dalam objek hasil instance lengkap dari bidang relasional satu ke satu, dengan cara yang sama seperti yang dilakukan dengan bidang relasional satu ke banyak kesimpulan di akhir panduan ini, anda telah belajar bagaimana cara membuat dan mengkueri relasi di parse pada react di panduan berikutnya, kami akan menunjukkan kepada anda cara mendaftar pengguna