Pengaturan Flutter GraphQL: Koneksi dan Implementasi

pengaturan flutter graphql pendahuluan dalam tutorial terakhir, kita memahami manfaat menggunakan back4app graphql dengan flutter dalam artikel ini, kita akan menyiapkan kerangka dasar untuk proyek dan menghubungkannya ke server back4app tujuan siapkan lingkungan flutter anatomi pengaturan flutter graphql koneksi flutter graphql penggunaan kembali koneksi flutter graphql dan pola prasyarat kami memerlukan agar pengguna memiliki pemahaman dasar tentang dart dan flutter; meskipun tidak diperlukan, buku masak graphql akan berguna dalam memahami konsep graphql 0 siapkan aplikasi dari back4app hub kita perlu membuat aplikasi, anda dapat mengikuti dokumentasi di https //www back4app com/docs/get started/new parse app https //www back4app com/docs/get started/new parse app kita akan menggunakan back4app hub untuk menyiapkan kelas yang diperlukan untuk tutorial ini silakan pergi ke https //www back4app com/database/chinmay/flutter graphql https //www back4app com/database/chinmay/flutter graphql klik pada sambungkan ke api pilih aplikasi yang baru dibuat dan kemudian anda selesai! 1 menyiapkan flutter menyiapkan flutter relatif mudah kami akan mengikuti petunjuk pengaturan di situs resmi flutter https //flutter dev/docs/get started/install setelah ini kami akan membuat aplikasi flutter sederhana menggunakan perintah periksa apakah semuanya baik baik saja menggunakan perintah flutter doctor flutter doctor , dengan menjalankan aplikasi 2 menginstal pustaka flutter graphql untuk mengimplementasikan klien ini kami akan menggunakan pustaka flutter graphql seperti yang disebutkan dalam artikel pertama kami sekarang akan menambahkan ini ke paket anda pubspec yaml pubspec yaml 3 buat penyedia graphql flutter dalam graphql kita tidak perlu bekerja dengan banyak endpoint, kita hanya memiliki satu endpoint yang digunakan untuk meminta data dan kita mengirimkan kueri graphql ke endpoint tersebut jadi umumnya yang kita lakukan adalah membuat sebuah instance dari klien yang bertanggung jawab untuk mengirimkan header yang sesuai dan memformat kueri sesuai kebutuhan kita kita akan membuat klien, untuk ini kita memerlukan sebuah tautan (instance dari kelas httplink) dan sebuah penyimpanan cache kita akan menggunakan httplink httplink sebagai tautan kita dan optimisticcache untuk caching kita kode akan ditulis dengan cara berikut di main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart kita akan menulis yang berikut 1 final httplink httplink = httplink( 2 uri 'https //parseapi back4app com/graphql', 3 headers { 4 'x parse application id' kparseapplicationid, 5 'x parse client key' kparseclientkey, 6 }, //getheaders() 7 ); 8 9 valuenotifier\<graphqlclient> client = valuenotifier( 10 graphqlclient( 11 cache optimisticcache(dataidfromobject typenamedataidfromobject), 12 link httplink, 13 ), 14 ); 15 4 hubungkan ke back4app menggunakan graphql pergi ke dasbor back4app di opsi “api console” > “graphql console” catat url api id aplikasi parse id klien parse kita akan membuat file baru constants dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart di lib lib folder proyek kita 5 mengquery data komponen kami akan dibungkus oleh widget graphqlprovider, yang akan memberikan detail yang diperlukan untuk widget tersebut kami perlu menyediakan sebuah instance dari klien yang kami buat di langkah 2 kami akan menggunakan konsol graphql, untuk menulis query kami anda dapat mempelajari lebih lanjut tentang query graphql di bagian buku masak graphql https //www back4app com/docs/parse graphql/graphql getting started 1 import 'package\ graphql flutter/graphql flutter dart'; 2 import 'constants dart'; 3 4 class myhomepagestate extends state\<myhomepage> { 5 string name; 6 string saveformat; 7 string objectid; 8 9 string query = ''' 10 query findlanguages{ 11 languages{ 12 count, 13 edges{ 14 node{ 15 name, 16 saveformat 17 } 18 } 19 } 20 } 21 '''; 22 23 @override 24 widget build(buildcontext context) { 25 return safearea( 26 child scaffold( 27 appbar appbar( 28 title text( 29 'parsing data using graphql', 30 ), 31 ), 32 body query( 33 options queryoptions( 34 documentnode gql(query), 35 ), 36 builder ( 37 queryresult result, { 38 refetch refetch, 39 fetchmore fetchmore, 40 }) { 41 if (result data == null) { //check if data is loading 42 return center( 43 child text( 44 "loading ", 45 style textstyle(fontsize 20 0), 46 )); 47 } 48 //to implement rendering logic 49 }, 50 ), 51 ), 52 ); 53 } 54 } 6 render daftar kami akan menggunakan listview listview widget untuk merender daftar, di main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart 1 else { 2 return listview\ builder( 3 itembuilder (buildcontext context, int index) { 4 return listtile( 5 title text(result data\["programminglanguages"]\["edges"]\[index]\["node"]\['name']), 6 trailing text( 7 result data\["programminglanguages"]\["edges"]\[index] 8 \["node"]\['stronglytyped'] ? "strongly typed" "weekly typed" 9 ), 10 ); 11 }, 12 itemcount result data\["programminglanguages"]\["edges"] length, 13 ); 14 } 15 kita harus mendapatkan yang berikut di layar kita kesimpulan kami telah mengonfigurasi klien flutter graphql dan terhubung ke api graphql back4app anda dapat menemukan kode untuk yang sama di sini https //github com/templates back4app/flutter graphql/tree/flutter graphql setup https //github com/templates back4app/flutter graphql/tree/flutter graphql setup