Optimalkan Aplikasi Flutter Anda dengan Integrasi GraphQL

flutter graphql di back4app pendahuluan karena anda berada di sini menjelajahi dokumen back4app, anda tahu bahwa back4app adalah backend low code yang fleksibel ini memungkinkan anda untuk berinteraksi dengan backend anda dengan beberapa cara yang berbeda, sesuai keinginan anda jika anda mau, anda dapat menggunakan rest api, atau anda dapat langsung menggunakan sdk native https //pub dev/packages/parse server sdk untuk flutter dalam seri tutorial ini, kita akan menjelajahi penggunaan api graphql yang baru dan cemerlang dengan flutter panduan ini ditulis oleh chinmay, seorang mitra back4app https //www back4app com/partners/software development company di hybrowlabs tujuan mendapatkan gambaran umum tentang graphql; memahami bagaimana graphql dan flutter saling berhubungan; memahami alat dan pustaka flutter yang tersedia untuk graphql; memahami arsitektur umum dan konsep kunci dalam aplikasi flutter graphql; prasyarat kami memerlukan pengguna yang memiliki pemahaman dasar tentang dart dan flutter; meskipun tidak diperlukan, buku masak graphql akan berguna untuk memahami spesifikasi graphql back4app apa itu graphql graphql adalah arsitektur alternatif untuk standar rest api graphql lahir ketika tim facebook membangun kembali aplikasi native mereka dari awal dan mereka sangat membutuhkan untuk mengoptimalkan data yang mereka terima dari backend saat mereka merombak layanan mereka sebagai sekumpulan sumber daya, mereka merasa frustrasi karena itu tidak membawa mereka ke mana mana mereka mundur sejenak dan memikirkan kembali data sebagai grafik objek yang saling terhubung alih alih sumber daya rest yang terisolasi ini membuat perbedaan besar bagi arsitektur aplikasi mereka dan itulah bagaimana graphql lahir sejak graphql dirilis ke publik pada tahun 2015, ia telah mendapatkan popularitas dan perhatian yang besar dan telah diadopsi untuk digunakan di tim tim seperti twitter, airbnb, atlassian, github mengapa graphql? di hybrowlabs, sebuah mitra back4app https //www back4app com/partners/software development company , kami membangun aplikasi web dan mobile modern yang intensif data kami mengadopsi back4app sebagai layanan backend pilihan kami karena kemudahan penggunaan, optimasi, dan fitur definisi skema yang disediakan di atas database yang sudah luar biasa sebagian besar waktu, aplikasi dalam aplikasi yang kami rekayasa data yang ditampilkan atau dimanipulasi tidak hanya berasal dari satu kelas back4app sebaliknya, data ini berasal dari beberapa kelas kombinasi back4app graphql memudahkan kami untuk menangani skenario semacam itu selama ini, ia memungkinkan kami untuk mengurangi jejak jaringan menjadi 2 3 panggilan per muatan layar, hanya membawa data yang kami inginkan di sisi lain, kode cloud yang kami definisikan dengan mudah terdokumentasi karena sifat graphql yang terketik dengan kuat ini membuat kode kami dapat dipelihara dan mudah dipahami tldr; berikut adalah keuntungan menggunakan graphql jejak jaringan diminimalkan kueri yang efisien dan pengelompokan kueri manajemen kode yang lebih baik sifat terketik dengan kuat membawa prediktabilitas flutter dan back4app graphql seringkali sangat sulit untuk merancang solusi backend graphql yang menggabungkan fleksibilitas basis data nosql sambil mempertahankan struktur dan organisasi yang disediakan oleh memiliki struktur tipe dan skema graphql back4app selalu memiliki desain berbasis skema yang terstruktur dan sekarang graphql membawanya ke tingkat yang sama sekali baru dengan menciptakan api yang mengetahui semantik dari sistem tipe di sisi lain, seperti yang kita ketahui dart (yang menjadi dasar flutter) adalah bahasa yang memiliki tipe yang kuat ya, dart sangat memperhatikan keamanan tipe dengan graphql kita memiliki skema yang dapat digunakan kembali di sisi klien ini membuat hidup jauh lebih mudah juga mengetahui skema tipe yang dapat diambil di masa depan sangat membantu karena memungkinkan kita untuk menerapkan algoritma caching dan invalidasi kueri yang canggih pada data ini toolkit flutter untuk back4app graphql untuk berinteraksi dengan api graphql kami, kami akan memanfaatkan graphql flutter https //github com/zino app/graphql flutter pustaka yang luar biasa jadi mari kita pahami fitur fitur yang disediakan pustaka ini dukungan untuk kueri dan mutasi semua skema yang didefinisikan di dasbor back4app langsung dikonversi ke endpoint graphql back4app dan tersedia baik sebagai kueri atau mutasi kueri memungkinkan kita untuk mendapatkan data bersarang dari beberapa kelas dalam satu panggilan api kueri terutama dilakukan untuk tujuan pengambilan data, dan mereka disimpan dalam cache oleh back4app graphql memungkinkan metode kueri yang kaya, mendukung geolokasi, waktu, regex, dan fitur pencarian teks lengkap mutasi memungkinkan kita untuk melakukan panggilan api yang dapat memperbarui beberapa entri kelas mutasi terdiri dari terutama membuat, mengedit, menghapus data berikut adalah kelas programinglanguage yang telah saya buat di back4app saat menavigasi ke bagian graphql dari api untuk back4app, anda akan melihat konsol back4app yang telah dijelaskan sebelumnya konsol ini sekarang akan memiliki semua mutasi dan kueri yang dibuat secara otomatis! saat saya pergi ke bagian graphql dari api untuk back4app, kita akan melihat konsol back4app yang telah dijelaskan sebelumnya konsol ini sekarang akan memiliki semua mutasi dan kueri yang dibuat secara otomatis! dalam gambar di atas, saya telah menggunakan back4app graphql untuk daftar semua bahasa pemrograman saya dari kelas programminglanguage demikian pula, kita dapat membuat entri dalam kelas programminglanguage back4app kita dengan memanfaatkan mutasi polling kueri 1 query( 2 query( 3 options queryoptions( 4 document get all programming languages, // this is the query string you just created 5 pollinterval 10, //setting up polling 6 ), 7 builder (queryresult result) { 8 if (result errors != null) { 9 return text(result errors tostring()); 10 } 11 12 if (result loading) { 13 return text('loading'); 14 } 15 16 // it can be either map or list 17 list programminglanguages = result data\['programminglanguages']; 18 19 return listview\ builder( 20 itemcount programminglanguages length, 21 itembuilder (context, index) { 22 final repository = programminglanguages\[index]; 23 return text(programminglanguages\['name']); 24 }); 25 }, 26 ); untuk beberapa kasus penggunaan, di mana langganan mungkin berlebihan kita perlu menyegarkan data secara berkala, kita dapat menggunakan fitur polling kueri dari klien ini memungkinkan kita untuk mengambil data terbaru secara berkala misalnya, kita dapat melakukan pengambilan data latar belakang setiap 1 menit cache dalam memori 1 static future\<queryresult> callquery( 2 {dynamic documentnode, dynamic variables, fetchpolicy fetchpolicy}) { 3 return singleton client query( 4 queryoptions( 5 context singleton context, 6 documentnode documentnode, 7 variables variables, 8 fetchpolicy fetchpolicy ?? fetchpolicy cacheandnetwork, 9 ), 10 ); 11 } klien flutter graphql menerapkan berbagai cara untuk menyimpan data dalam cache, yaitu cache saat revalidasi mari kita pertimbangkan contoh sederhana mengambil daftar artikel kita ingin data daftar disimpan dalam cache, ketika kita berpindah dari daftar ke artikel tertentu dan kemudian kembali mekanisme cache saat revalidasi menerapkan metode ini untuk menanyakan data, ini berarti bahwa meskipun panggilan api dilakukan untuk mengambil data, data lama digunakan untuk ditampilkan sementara data baru sedang diambil, ketika data baru tersedia, itu kemudian ditampilkan cache saja dalam metode ini, panggilan jaringan hanya dilakukan jika tidak ada data di perangkat kita ini bermanfaat ketika dipasangkan dengan fasilitas sinkronisasi offline untuk titik data yang tidak akan berubah ini mengoptimalkan jaringan dan menghemat sumber daya jaringan saja dalam kasus langka ketika anda tidak ingin menyimpan cache data, maka anda dapat menggunakan mode jaringan saja dari pustaka flutter graphql sinkronisasi cache offline pengalaman mobile mengharapkan bahwa itu diaktifkan offline secara default melakukan ini dengan flutter dan rest api sangat melelahkan anda harus menyimpan data ke dalam database sqlite, memeriksa apakah data ada atau tidak, menulis kueri sql untuk mengambil data, dan kemudian juga melakukan panggilan jaringan untuk memperbarui data itu adalah banyak pekerjaan, yang sepenuhnya dihindari dengan penggunaan plugin ini dan dukungan offline untuk kueri sudah terintegrasi ke dalam aplikasi flutter kami penyimpanan file 1 mutation($files \[upload!]!) { 2 multipleupload(files $files) { 3 id 4 filename 5 mimetype 6 path 7 } 8 } 9 10 import 'package\ http/http dart'; 11 12 // 13 14 string filepath = '/aboslute/path/to/file ext'; 15 final file = await multipartfilefrom(file(filepath)); 16 17 final queryresult r = await graphqlclientclient mutate( 18 mutationoptions( 19 documentnode gql(uploadmutation), 20 variables { 21 'files' \[file], 22 }, 23 ) 24 );gr banyak pustaka server graphql tidak mendukung fasilitas unggah file menggunakan kueri graphql untuk mengunggah file, kita harus memanggil endpoint rest terpisah unggah file, dapatkan url, lalu kirimkan ke api graphql dalam bentuk string juga, kita harus secara manual memelihara metadata file seperti nama file, dll back4app memiliki dukungan untuk standar unggah file yang terintegrasi ke dalam api graphql back4app ketika file diunggah, itu diunggah sebagai tipe file dari graphql, yang sesuai dengan file back4app dalam graphql secara otomatis, kami telah menyimpan file ke dalam penyimpanan file back4app yang sangat skalabel yang didukung oleh aws s3 hasil optimis 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) pengguna telah datang untuk mengharapkan ui yang sangat menarik, dan umpan balik instan ui optimis adalah prinsip ui/ux yang pada dasarnya mengatakan bahwa kita tidak boleh menunggu tindakan untuk selesai tetapi sebaliknya, kita menunjukkan umpan balik kepada pengguna bahwa kita telah menyelesaikan tindakan! ini dilakukan dengan asumsi bahwa tindakan akan sebagian besar berhasil 99% dari waktu jika tindakan sayangnya gagal, kita menunjukkan pesan kegagalan yang mengatakan bahwa kita tidak dapat menyelesaikan tindakan flutter graphql dilengkapi dengan dukungan bawaan untuk mendefinisikan mutasi optimis yang membuatnya jauh lebih mudah untuk menerapkan sistem interaksi ui kompleks ini dengan ini, kita memiliki basis yang sangat teroptimasi untuk membangun aplikasi modern kesimpulan dalam panduan ini, kami memperkenalkan anda pada beberapa keuntungan penting menggunakan graphql di proyek flutter anda di back4app dalam panduan berikutnya, kami akan mulai menulis kode dan mulai dengan mengatur klien graphql flutter kami untuk menggunakan api back4app