Implementasi Relasi Data Menggunakan GraphQL di Flutter

simpan data relasional menggunakan graphql pendahuluan dalam dua tutorial terakhir, kami telah melakukan kueri dan mutasi graphql pada database back4app dari proyek aplikasi flutter kami kami menggunakan graphql flutter https //pub dev/packages/graphql flutter/install sebagai klien graphql kami karena ini adalah proyek yang sangat kuat dan banyak digunakan untuk tutorial tersebut, kami telah menggunakan model data yang sangat sederhana dengan jenis yang paling umum untuk kelas kami back4app adalah platform yang fleksibel yang memungkinkan anda untuk membuat, menyimpan, dan mengkueri data relasional dalam tutorial ini, kami akan menyelami kemampuan ini dengan menunjukkan kepada anda cara menggunakan relasi dan pointer saat menyimpan dan mengkueri data relasional di backend back4app juga, kami akan menjelajahi jenis data lain yang ditawarkan back4app seperti geopointer dan datetime tujuan di akhir artikel ini, anda akan dapat membuat/memperbarui dan menghapus data relasional (menggunakan pointers dan relations) membuat/memperbarui geopointers membuat/memperbarui tanggal waktu prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan pastikan anda telah membaca dua panduan sebelumnya mulai dari template dan graphql mutation unduh file proyek dari github repo yang mencakup kode sebelumnya serta gui baru yang anda butuhkan buka proyek yang diunduh di ide flutter seperti vs code atau android studio akun back4app yang dapat dibuat di sini sambungkan tutorial anda ke back4app sesuai dengan tutorial sebelumnya mulai dari template 1 menyiapkan back end di proyek sebelumnya https //www back4app com/docs/flutter/flutter crud app example model data kami sangat sederhana dengan hanya satu kelas bahasa sekarang kami akan membuatnya lebih kompleks dengan menambahkan 2 kelas baru dan menghubungkannya ke bahasa pendiri dengan format nama kolom deskripsi nama nama pendiri bahasa ini nama kolom deskripsi nama nama pemilik perusahaan tanggal dimiliki tanggal kepemilikan diperoleh oleh perusahaan kantor pusat lokasi kantor pusat perusahaan kami akan membuat hubungan satu ke satu antara kelas language dan kelas founder menggunakan parse pointers, yang akan memberi tahu pendiri dari bahasa tertentu kemudian, kami akan membuat hubungan satu ke banyak antara kelas language dan kelas ownership menggunakan parse relations yang akan memberi tahu organisasi/perusahaan mana yang memiliki bahasa tersebut, kantor pusat mereka, dan tanggal mereka memperoleh kepemilikan bahasa tersebut model data akan terlihat seperti ini sebelum kita beralih ke aplikasi kita, mari kita buat kelas dan data di back end kita yang akan kita perlukan pergi ke aplikasi back4app anda dan kemudian pergi ke graphql playground menggunakan mutasi di bawah ini, buat kelas founder di mana kita akan menyimpan nama nama pendiri bahasa 1 mutation createclass { 2 createclass(input { 3 name "founder" 4 schemafields { 5 addstrings \[{name "name"}] 6 } 7 }){ 8 class{ 9 schemafields{ 10 name 11 typename 12 } 13 } 14 } 15 } sekarang mari kita isi kelas kita dengan beberapa nama pendiri dalam langkah langkah berikut, kita akan menggunakan data ini untuk membuat bahasa baru yang mengarah ke kelas pendiri gunakan mutasi di bawah ini di back4app graphql playground untuk membuat pendiri anda 1 mutation createobject{ 2 createfounder(input {fields {name "james gosling"}}){ 3 founder{ 4 id 5 name 6 } 7 } 8 } di sini kita telah memasukkan nama pendiri bahasa pemrograman java anda juga dapat melakukan hal yang sama untuk yang lain, tetapi saat ini ini sudah cukup untuk panduan kita mari kita buat kelas ownership di mana kita akan menyimpan kepemilikan bahasa, tanggal pendirian (tanggal waktu) dan lokasi markas pemilik (geopointer) nanti kita akan membuat hubungan antara kelas bahasa dan kepemilikan lanjutkan dengan menjalankan kode di bawah ini untuk membuat kelas 1 mutation createclass { 2 createclass(input { 3 name "ownership" 4 schemafields { 5 addstrings \[{name "name"}] 6 adddates \[{name "date owned"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } sekarang isi kepemilikan kelas menggunakan mutasi berikut 1 mutation createobject{ 2 createownership(input {fields {name "sun microsystems"}}){ 3 ownership{ 4 id 5 name 6 } 7 } 8 }1 mutation createobject{ 2 createownership(input {fields {name "oracle"}}){ 3 ownership{ 4 id 5 name 6 } 7 } 8 } sekarang segarkan halaman, pergi ke kepemilikan kepemilikan kelas di database browser pilih tambahkan kolom baru dari kanan atas pilih geopoint dari dropdown pertama dan beri nama kantor pusat di kolom teks kedua dan biarkan semuanya seperti semula dan tekan tombol tambahkan kolom kemudian pergi ke kelas anda bahasa bahasa di database browser mari kita tambahkan relasi ke kepemilikan kepemilikan dan pendiri pendiri kelas klik pada tambahkan kolom baru dan kemudian pilih tipe data pointer dan kelas target pendiri pendiri beri nama kolom yang sama pendiri lalu tekan tambah kolom sekarang ulangi proses itu dengan menambahkan kolom baru yang disebut kepemilikan menggunakan tipe data relasi dan memilih kelas kepemilikan kepemilikan sekarang anda memiliki model data anda siap digunakan di aplikasi flutter anda dan untuk mulai menyimpan dan memperbarui data 2 membuat/menambahkan dan menghapus pointers sekarang anda perlu mengunduh kode boilerplate proyek dari repo github https //github com/templates back4app/flutter graphql/tree/complex mutations yang terbuka di ide anda untuk menghubungkan proyek anda ke back4app, buka graphql playground dan salin kunci dan url api seperti yang ditunjukkan pada gambar di bawah sekarang tempelkan ke dalam constants dart constants dart dan jalankan proyek anda jalankan aplikasi di emulator anda pergi ke m tombol mengambang di bagian bawah itu akan membawa kita ke halaman di mana kita melakukan mutasi sederhana di sini anda akan menemukan tombol aksi mengambang tambahan cm itu adalah tombol yang akan kita gunakan untuk melakukan mutasi graphql kompleks kita klik pada tombol cm dan anda akan melihat empat tombol lainnya, satu untuk setiap operasi yang akan kita lakukan dalam panduan ini sekarang buka databaseutils dart databaseutils dart file dan gulir ke bawah ke addpointers() addpointers() metode di sini kita akan menambahkan logika untuk menambahkan pointers kita akan menunjuk james gosling sebagai pendiri bahasa java jadi pertama anda perlu melanjutkan ke backend back4app anda dan menyalin objectid objectid dari pendiri (james gosling) dan bahasa (java) memperbarui/membuat pointer ke data lanjutkan ke aplikasi kami di dalam databaseutils dart databaseutils dart dan di dalam addpointers() addpointers() metode inisialisasi string addpointerquery string addpointerquery di mana kita akan menetapkan kueri graphql untuk menambahkan pointers sebagai berikut 1 string addpointerquery= 2 ''' 3 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 4 updatelanguage(input {id \\$languageid, fields \\$founderid}) 5 { 6 language{ 7 objectid 8 } 9 } 10 } 11 '''; dan inisialisasi variabel final variabel final untuk menetapkan variabel, perhatikan kita mengambil rowobjectid rowobjectid dan pointersid pointersid sebagai parameter di mana rowobjectid rowobjectid id objek dari baris dari mana kita akan menunjuk pointersid pointersid id objek ke baris yang akan ditunjuk jadi deklarasikan variabel variabel sebagai 1 final variable={ 2 "userid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "link" pointersid 6 } 7 } 8 }; sekarang seperti panduan terakhir kita akan menginisialisasi graphqlclient graphqlclient dan mengirimkan kueri dengan bantuan queryoptions() queryoptions() dan mengembalikan instansinya dengan queryresults() queryresults() 1 graphqlconfiguration configuration = graphqlconfiguration(); 2 graphqlclient client = configuration clienttoquery(); 3 4 queryresult queryresult = await client query( 5 queryoptions(documentnode gql(addpointerquery), variables variable), 6 ); 7 return queryresult; inilah bagaimana metode addpointers() addpointers() anda seharusnya terlihat seperti 1 future\<queryresult> addpointers(string rowobjectid, string pointersid) async{ 2 print('addpointers'); 3 //code for add/update pointers 4 string addpointerquery= 5 ''' 6 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 7 updatelanguage(input {id \\$languageid, fields \\$founderid}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "userid" rowobjectid, 17 "founderid" { 18 "founder" { 19 "link" pointersid 20 } 21 } 22 }; 23 graphqlconfiguration configuration = graphqlconfiguration(); 24 graphqlclient client = configuration clienttoquery(); 25 26 queryresult queryresult = await client query( 27 queryoptions(documentnode gql(addpointerquery), variables variable), 28 ); 29 return queryresult; 30 } lakukan hot restart pada aplikasi anda sekarang, pergi ke tombol cm di halaman mutasi dan kemudian tekan tombol set add pointers di sini masukkan row objectid objectid di mana pointer perlu ditambahkan di text field pertama dan objectid objectid dari row di mana itu akan menunjuk di text field kedua dan kemudian tekan selesai sekarang periksa dashboard anda dan anda harus dapat melihat hubungan di bawah kolom founder anda dapat mengkliknya di mana itu akan membawa anda ke row yang menunjuk ke kelas founder menghapus pointer ke data sekarang lanjut ke metode deletepointers() deletepointers() di mana kita akan menulis logika untuk menghapus hubungan untuk menghapus hubungan, anda hanya perlu melakukan sedikit perubahan pada kueri di atas, yaitu, dalam variabel hanya perlu mengganti "link" "link" dengan "remove" "remove" jadi setelah menginisialisasi variabel akhir variabel akhir itu akan menjadi 1 final variable={ 2 "languageid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "remove" pointersid 6 } 7 } 8 }; segala sesuatu yang lain akan terlihat persis sama seperti addpointers() addpointers() jadi metode deletepointers() deletepointers() anda terlihat seperti 1 future\<queryresult> deletepointers(string rowobjectid, string pointersid) async{ 2 print('deletepointers'); 3 //code for delete pointers 4 string removepointersquery= 5 ''' 6 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 7 updatelanguage(input {id \\$languageid, fields \\$founderid}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "languageid" rowobjectid, 17 "founderid" { 18 "founder" { 19 "remove" pointersid 20 } 21 } 22 }; 23 graphqlconfiguration configuration = graphqlconfiguration(); 24 graphqlclient client = configuration clienttoquery(); 25 26 queryresult queryresult = await client query( 27 queryoptions(documentnode gql(removepointersquery), variables variable), 28 ); 29 return queryresult; 30 31 } anda sekarang dapat melanjutkan ke dasbor back4app anda dan melihat bahwa kolom pendiri dari baris tertentu telah dihapus 3 membuat/menambahkan dan menghapus data tanggal waktu jika anda ingat, kami telah membuat kelas ownership sebelumnya di langkah 1 dan menyimpan beberapa data ke dalamnya ini adalah nama nama perusahaan yang memiliki bahasa pemrograman java jadi pertama tama mari kita masukkan tanggal saat mereka memperoleh kepemilikan mari kita lanjutkan ke databaseutils dart databaseutils dart dan buat atau gulir ke bawah ke adddatetime() adddatetime() fungsi di sini kita akan menulis logika untuk menambahkan tipe data tanggal waktu ke kelas kita inisialisasi string adddatetimequery string adddatetimequery dan tetapkan kueri untuk membuat data tanggal waktu 1 string adddatetimequery= 2 ''' 3 mutation addtime(\\$rowid id!,\\$dateowned date!){ 4 updateownership(input {id \\$rowid, fields {date owned \\$dateowned}}) 5 { 6 ownership{ 7 objectid 8 } 9 } 10 } 11 '''; dan variabel final variabel final sebagai 1 final variable={ 2 "rowid" rowobjectid, 3 "dateowned" datetime 4 }; sekarang inisialisasi graphqlclient graphqlclient dan lewati kueri melalui queryoption() queryoption() begini cara fungsi anda akan terlihat 1 future\<queryresult> adddatetime(string rowobjectid, string datetime) async{ 2 print('adddatetime'); 3 //code for add/update date time 4 string adddatetimequery= 5 ''' 6 mutation addtime(\\$rowid id!,\\$dateowned date!){ 7 updateownership(input {id \\$rowid, fields {date owned \\$dateowned}}) 8 { 9 ownership{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "rowid" rowobjectid, 17 "dateowned" datetime 18 }; 19 graphqlconfiguration configuration = graphqlconfiguration(); 20 graphqlclient client = configuration clienttoquery(); 21 queryresult queryresult = await client query( 22 queryoptions(documentnode gql(adddatetimequery), variables variable), 23 ); 24 return queryresult; 25 } sekarang hot restart aplikasi dan catat objectid dari baris yang berisi sun microsystems di kolom name tekan tombol add date time sekarang masukkan objectid yang dicatat di kolom teks pertama dan “02 24 1982” sebagai format mm dd yyyy pada hari ketika java diterbitkan dan tekan tombol done lanjutkan ke backend back4app anda dan anda akan melihat tanggal dalam bentuk 24 feb 1982 pada 00 00 00 utc yang berarti telah mengidentifikasi tipe data sebagai tipe data tanggal waktu demikian pula, anda dapat menambahkan “01 27 2010” untuk date owned untuk oracle 4 menambahkan/memperbarui data geopointer mari kita tambahkan data geopointer untuk menentukan lokasi kantor pusat perusahaan dari tabel ownership lanjutkan ke database utils dart database utils dart file dan gulir ke bawah ke addgeopointers() addgeopointers() fungsi sekarang inisialisasi string addgeopointers string addgeopointers dan tetapkan kueri yang sesuai 1 string addgeopointers= 2 ''' 3 mutation addgeopointer(\\$objectid id!,\\$latitude float!,\\$longitude float!){ 4 updateownership(input {id \\$objectid, fields { headquarters {latitude \\$latitude, longitude \\$longitude}}}) 5 { 6 ownership{ 7 objectid 8 } 9 } 10 } 11 '''; dan variabel final variabel final sebagai 1 final variable={ 2 "objectid" rowobjectid, 3 "latitude" double parse(latitude), 4 "longitude" double parse(longitude), 5 }; karena latitude latitude dan longitude longitude adalah nilai ganda, kita perlu mengubahnya dari string ke double sebelum mengirimnya inisialisasi grapqlclient grapqlclient dan kirim kueri dengan queryoption() queryoption() begini cara fungsi addgeopointers() addgeopointers() anda akan terlihat 1 future\<queryresult> addgeopointers(string rowobjectid, string latitude, string longitude) async{ 2 print('add geopointers'); 3 //code for add/update geopointers 4 string addgeopointers= 5 ''' 6 mutation addgeopointer(\\$objectid id!,\\$latitude float!,\\$longitude float!){ 7 updateownership(input {id \\$objectid, fields { headquarters {latitude \\$latitude, longitude \\$longitude}}}) 8 { 9 ownership{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "objectid" rowobjectid, 17 "latitude" double parse(latitude), 18 "longitude" double parse(longitude), 19 }; 20 graphqlconfiguration configuration = graphqlconfiguration(); 21 graphqlclient client = configuration clienttoquery(); 22 queryresult queryresult = await client query( 23 queryoptions(documentnode gql(addgeopointers), variables variable), 24 ); 25 return queryresult; 26 } lakukan hot restart pada aplikasi anda dan pilih tombol add geopointers masukkan 37 35 37 35 di kotak teks pertama dan 121 95 121 95 di kotak teks kedua masukkan objectid dari baris dengan sun microsystems sebagai name dan tekan selesai sekarang lanjutkan ke backend back4app anda dan anda akan melihat (37 35, 121 95) yang merupakan koordinat dari headquaters dan menyatakan bahwa itu mengidentifikasinya sebagai geopointers 5 menambahkan/memperbarui dan menghapus relasi dalam pointer kita hanya dapat menunjuk ke satu baris, tetapi dengan bantuan relasi kita dapat membuat koneksi ke beberapa baris jadi mari kita buat relasi dari tabel language ke dua baris ini untuk ownership dari bahasa java menambahkan/memperbarui hubungan lanjutkan ke database utils dart database utils dart file dan lanjutkan ke addrelation() addrelation() fungsi untuk menulis logika inisialisasi string addrelationquery string addrelationquery dan tetapkan kueri untuk hubungan sebagai berikut 1 string addrelationquery= 2 ''' 3 mutation addrelation(\\$objectid id!, \\$relationid ownershiprelationinput){ 4 updatelanguage(input {id \\$objectid, fields {ownership \\$relationid}}) 5 { 6 language{ 7 objectid 8 } 9 } 10 } 11 '''; dan variabel final variabel final akan menjadi 1 final variable= { 2 "objectid" objectid, 3 "relationid" relationid 4 }; jadi setelah menginisialisasi graphqlclient graphqlclient dan meneruskan kueri seperti sebelumnya, inilah bagaimana database utils dart database utils dart anda akan terlihat 1 future\<queryresult> addrelation(string rowobjectid, string relationid) async{ 2 //code for add/update relation 3 print('addrelation'); 4 string addrelationquery= 5 ''' 6 mutation addrelation(\\$objectid id!, \\$relationid ownershiprelationinput){ 7 updatelanguage(input {id \\$objectid, fields {ownership \\$relationid}}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable= { 16 "objectid" rowobjectid, 17 "relationid" { 18 "add" relationid 19 } 20 }; 21 graphqlconfiguration configuration = graphqlconfiguration(); 22 graphqlclient client = configuration clienttoquery(); 23 queryresult queryresult = await client query( 24 queryoptions(documentnode gql(addrelationquery), variables variable), 25 ); 26 print(queryresult); 27 return queryresult; 28 } berhasil aplikasi anda akhirnya telah menyimpan data relasional, datetime, dan geopointers di back4app! kesimpulan dalam panduan ini, kami belajar bagaimana menyimpan data relasional di back4app menggunakan graphql dari proyek aplikasi flutter kami juga bekerja dengan mutasi graphql lainnya seperti geopointers dan datetime, membuat, memperbarui, dan menghapus data pada tutorial berikutnya, kami akan mendalami kueri untuk aplikasi flutter kami panduan ini ditulis oleh asim junain, dari hybrowlabs https //www back4app com/partners/software development company