วิธีตั้งค่า Flutter GraphQL Client กับ Back4app

การตั้งค่า flutter graphql บทนำ ในบทเรียนก่อนหน้าเราได้เข้าใจถึงประโยชน์ของการใช้ back4app graphql กับ flutter ในบทความนี้เราจะตั้งค่าโครงสร้างพื้นฐานสำหรับโปรเจกต์และเชื่อมต่อกับ back4app server เป้าหมาย ตั้งค่าสภาพแวดล้อม flutter โครงสร้างการตั้งค่า flutter graphql การเชื่อมต่อ flutter graphql การใช้ซ้ำและรูปแบบการเชื่อมต่อ flutter graphql ข้อกำหนดเบื้องต้น เราต้องการให้ผู้ใช้มีความเข้าใจพื้นฐานเกี่ยวกับ dart และ flutter; แม้ว่าจะไม่จำเป็น แต่คู่มือการทำอาหาร graphql จะมีประโยชน์ในการเข้าใจ แนวคิด graphql 0 ตั้งค่าแอปจาก back4app hub เราจำเป็นต้องสร้างแอป คุณสามารถติดตามเอกสารได้ที่ https //www back4app com/docs/get started/new parse app https //www back4app com/docs/get started/new parse app เราจะใช้ back4app hub เพื่อตั้งค่าชั้นเรียนที่จำเป็นสำหรับบทเรียนนี้ กรุณาไปที่ https //www back4app com/database/chinmay/flutter graphql https //www back4app com/database/chinmay/flutter graphql คลิกที่เชื่อมต่อกับ api เลือกแอปที่สร้างขึ้นใหม่แล้วคุณก็เสร็จเรียบร้อย! 1 การตั้งค่า flutter การตั้งค่า flutter ค่อนข้างง่ายดาย เราจะทำตามคำแนะนำการตั้งค่าที่ เว็บไซต์ flutter อย่างเป็นทางการ https //flutter dev/docs/get started/install หลังจากนี้เราจะสร้างแอปพลิเคชัน flutter ง่ายๆ โดยใช้คำสั่ง ตรวจสอบว่าทุกอย่างเรียบร้อยดีโดยใช้คำสั่ง flutter doctor flutter doctor , โดยการรันแอปพลิเคชัน 2 การติดตั้งไลบรารี flutter graphql ในการดำเนินการไคลเอนต์นี้เราจะใช้ไลบรารี flutter graphql ตามที่กล่าวถึงในบทความแรก เราจะเพิ่มสิ่งนี้ไปยังแพ็กเกจของคุณ pubspec yaml pubspec yaml 3 สร้าง flutter graphql provider ใน graphql เราไม่ต้องทำงานกับหลาย endpoint เรามีเพียง endpoint เดียวที่ใช้ในการเรียกข้อมูลที่ร้องขอ และเราส่งคำถาม graphql ไปยัง endpoint นั้น ดังนั้นโดยทั่วไปสิ่งที่เราทำคือเราสร้างอินสแตนซ์ของไคลเอนต์ที่รับผิดชอบในการส่ง header ที่เหมาะสมและจัดรูปแบบคำถามตามความต้องการของเรา。 เราจะสร้างไคลเอนต์ สำหรับสิ่งนี้เราต้องการลิงก์ (อินสแตนซ์ของคลาส httplink) และที่เก็บแคช เราจะใช้ httplink httplink เป็นลิงก์ของเราและ optimisticcache สำหรับการแคชของเรา โค้ดจะถูกเขียนในลักษณะดังต่อไปนี้ ใน main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart เราจะเขียนดังต่อไปนี้ 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 เชื่อมต่อกับ back4app โดยใช้ graphql ไปที่แดชบอร์ด back4app ในตัวเลือก “api console” > “graphql console” จดบันทึก api url parse app id parse client id เราจะสร้างไฟล์ใหม่ constants dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart ใน lib lib โฟลเดอร์ของโปรเจกต์ของเรา 5 การสอบถามข้อมูล ส่วนประกอบของเราจะถูกห่อหุ้มด้วยวิดเจ็ต graphqlprovider ซึ่งจะให้รายละเอียดที่จำเป็นสำหรับวิดเจ็ต เราจะต้องจัดเตรียมอินสแตนซ์ของไคลเอนต์ที่เราสร้างขึ้นในขั้นตอนที่ 2 เราจะใช้คอนโซล graphql เพื่อเขียนคำถามของเรา คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคำถาม graphql ได้ใน ส่วนสูตรการทำอาหาร 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 แสดงรายการ เราจะใช้ listview listview วิดเจ็ตเพื่อแสดงรายการใน 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 เราควรเห็นสิ่งต่อไปนี้บนหน้าจอของเรา บทสรุป เราได้กำหนดค่าลูกค้า flutter graphql และเชื่อมต่อกับ api graphql ของ back4app คุณสามารถค้นหาซอร์สโค้ดสำหรับสิ่งเดียวกันได้ที่นี่ https //github com/templates back4app/flutter graphql/tree/flutter graphql setup https //github com/templates back4app/flutter graphql/tree/flutter graphql setup