Flutter บันทึกข้อมูลเชิงสัมพันธ์ด้วย GraphQL - สำหรับ Devs
20 นาที
จัดเก็บข้อมูลเชิงสัมพันธ์โดยใช้ graphql บทนำ ในสองบทเรียนที่ผ่านมา เราได้ทำการสอบถามและเปลี่ยนแปลงข้อมูล graphql บนฐานข้อมูล back4app จากโปรเจกต์ flutter app ของเรา เรากำลังใช้ graphql flutter https //pub dev/packages/graphql flutter/install เป็นไคลเอนต์ graphql ของเรา เนื่องจากนี่เป็นโปรเจกต์ที่มีความแข็งแกร่งและใช้งานอย่างแพร่หลาย สำหรับบทเรียนเหล่านั้น เราได้ใช้โมเดลข้อมูลที่เรียบง่ายมากพร้อมกับประเภทที่พบบ่อยที่สุดสำหรับคลาสของเรา back4app เป็นแพลตฟอร์มที่ยืดหยุ่นซึ่งช่วยให้คุณสร้าง เก็บ และสอบถามข้อมูลเชิงสัมพันธ์ ในบทเรียนนี้เราจะดำดิ่งลึกเข้าไปในความสามารถนี้โดยแสดงให้คุณเห็นวิธีการใช้ความสัมพันธ์และพอยเตอร์เมื่อบันทึกและสอบถามข้อมูลเชิงสัมพันธ์บน back4app backend นอกจากนี้ เรายังจะสำรวจประเภทข้อมูลอื่น ๆ ที่ back4app มีให้ เช่น geopointer และ datetime เป้าหมาย เมื่อสิ้นสุดบทความนี้ คุณจะสามารถ สร้าง/อัปเดต และลบข้อมูลเชิงสัมพันธ์ (โดยใช้ pointers และ relations) สร้าง/อัปเดต geopointers สร้าง/อัปเดต วัน เวลา ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี ตรวจสอบให้แน่ใจว่าคุณได้อ่านคู่มือสองเล่มก่อนหน้านี้ เริ่มจากเทมเพลต https //www back4app com/docs/flutter/graphql/flutter graphql project with source code download และ graphql mutation https //www back4app com/docs/flutter/graphql/flutter crud app example ดาวน์โหลดไฟล์โปรเจกต์จาก github repo https //github com/templates back4app/flutter graphql/tree/complex mutations ซึ่งรวมถึงโค้ดก่อนหน้านี้และ gui ใหม่ที่คุณจะต้องใช้ เปิดโปรเจกต์ที่ดาวน์โหลดใน flutter ide เช่น vs code หรือ android studio บัญชี back4app ที่สามารถสร้างได้ ที่นี่ https //www back4app com/ เชื่อมต่อบทเรียนของคุณกับ back4app ตามบทเรียนก่อนหน้านี้ เริ่มจากเทมเพลต https //www back4app com/docs/flutter/graphql/flutter graphql project with source code download 1 การตั้งค่า back end ใน โปรเจกต์ก่อนหน้านี้ https //www back4app com/docs/flutter/flutter crud app example โมเดลข้อมูลของเรานั้นเรียบง่ายมาก โดยมีเพียงคลาสเดียว language ตอนนี้เราจะทำให้มันซับซ้อนขึ้นโดยการเพิ่มคลาสใหม่ 2 คลาสและเชื่อมโยงกับ language ผู้ก่อตั้งพร้อมรูปแบบ ชื่อคอลัมน์ คำอธิบาย ชื่อ ชื่อของผู้ก่อตั้งภาษา ชื่อคอลัมน์ คำอธิบาย ชื่อ ชื่อของเจ้าของบริษัท วันที่เป็นเจ้าของ วันที่บริษัทได้รับการเป็นเจ้าของ สำนักงานใหญ่ ที่ตั้งสำนักงานใหญ่ของบริษัท เราจะสร้างความสัมพันธ์แบบหนึ่งต่อหนึ่งระหว่างคลาส language และคลาส founder โดยใช้ parse pointers ซึ่งจะบอกชื่อผู้ก่อตั้งของภาษาที่เฉพาะเจาะจง จากนั้นเราจะสร้างความสัมพันธ์แบบหนึ่งต่อหลายระหว่างคลาส language และคลาส ownership โดยใช้ parse relations ที่จะบอกว่าองค์กร/บริษัทใดเป็นเจ้าของภาษา, สำนักงานใหญ่ของพวกเขา และวันที่พวกเขาได้รับสิทธิ์ในการเป็นเจ้าของภาษา โมเดลข้อมูลจะมีลักษณะดังนี้ ก่อนที่เราจะไปที่แอปของเรา มาสร้างคลาสและข้อมูลในแบ็กเอนด์ที่เราต้องการกันก่อน ไปที่แอป back4app ของคุณแล้วไปที่ graphql playground ใช้การเปลี่ยนแปลงด้านล่าง สร้างคลาส founder ที่เราจะเก็บชื่อผู้ก่อตั้งของภาษา 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 } ตอนนี้เรามาเติมชื่อผู้ก่อตั้งในคลาสของเรากัน ในขั้นตอนถัดไปเราจะใช้ข้อมูลนี้เพื่อสร้างภาษาทใหม่ที่ชี้ไปยังคลาสของผู้ก่อตั้ง ใช้การเปลี่ยนแปลงด้านล่างใน back4app graphql playground เพื่อสร้างผู้ก่อตั้งของคุณ 1 mutation createobject{ 2 createfounder(input {fields {name "james gosling"}}){ 3 founder{ 4 id 5 name 6 } 7 } 8 } ที่นี่เราก็ได้กรอกชื่อผู้ก่อตั้งภาษาโปรแกรม java คุณสามารถทำเช่นเดียวกันสำหรับคนอื่น ๆ ได้เช่นกัน แต่ตอนนี้นี่เพียงพอสำหรับคู่มือของเรา มาสร้างคลาส ownership ที่เราจะเก็บข้อมูลการเป็นเจ้าของภาษา วันก่อตั้ง (วันที่ เวลา) และสถานที่ตั้งสำนักงานใหญ่ของเจ้าของ (geopointer) กันเถอะ ต่อไปเราจะสร้างความสัมพันธ์ระหว่างคลาสภาษาและการเป็นเจ้าของ ดำเนินการโดยการรันโค้ดด้านล่างเพื่อสร้างคลาส 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 } ตอนนี้ให้กรอกข้อมูลใน ownership คลาสโดยใช้การเปลี่ยนแปลงต่อไปนี้ 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 } ตอนนี้ให้รีเฟรชหน้าเว็บ ไปที่ \<font color="#2166ae">ownership\</font> คลาสใน database browser เลือก add new column จากมุมขวาบน เลือก geopoint จากดรอปดาวน์แรกและตั้งชื่อว่า headquarters ในช่องข้อความที่สอง และปล่อยทุกอย่างไว้ตามเดิมแล้วกดปุ่ม add column จากนั้นไปที่ \<font color="#2166ae"> ภาษา\</font> คลาสใน database browser มาลงความสัมพันธ์กับ \<font color="#2166ae">การเป็นเจ้าของ\</font> และ \<font color="#2166ae">ผู้ก่อตั้ง\</font> คลาส คลิกที่ เพิ่มคอลัมน์ใหม่ และเลือกประเภทข้อมูลเป็น pointer และคลาสเป้าหมาย \<font color="#2166ae">ผู้ก่อตั้ง\</font> ตั้งชื่อคอลัมน์ว่า ผู้ก่อตั้ง แล้วกด เพิ่มคอลัมน์ ตอนนี้ทำซ้ำกระบวนการนั้นโดยการเพิ่มคอลัมน์ใหม่ชื่อการเป็นเจ้าของโดยใช้ประเภทข้อมูล relation และเลือกคลาส \<font color="#2166ae">การเป็นเจ้าของ\</font> ตอนนี้คุณมีโมเดลข้อมูลของคุณพร้อมใช้งานในแอป flutter ของคุณและเริ่มบันทึกและอัปเดตข้อมูล 2 การสร้าง/เพิ่มและลบพอยเตอร์ ตอนนี้คุณต้องดาวน์โหลดโค้ดโบลเลอร์เพลตของโปรเจกต์จาก github repo https //github com/templates back4app/flutter graphql/tree/complex mutations เปิดใน ide ของคุณ เพื่อเชื่อมต่อโปรเจกต์ของคุณกับ back4app ให้ไปที่ graphql playground แล้วคัดลอก keys และ api url ตามที่แสดงในภาพด้านล่าง ตอนนี้วางพวกมันลงใน \<font color="#2166ae">constants dart\</font> และรันโปรเจกต์ของคุณ รันแอปพลิเคชันใน emulator ของคุณ ไปที่ m ปุ่มลอยที่ด้านล่าง นั่นจะพาเราไปยังหน้าที่เราทำการเปลี่ยนแปลงแบบง่าย ที่นี่คุณจะพบปุ่มลอยเพิ่มเติม cm นั่นคือปุ่มที่เราจะใช้ในการทำการเปลี่ยนแปลง graphql ที่ซับซ้อน คลิกที่ cm ปุ่ม และคุณจะเห็นปุ่มอีกสี่ปุ่มหนึ่งสำหรับแต่ละการดำเนินการที่เราจะทำในคู่มือนี้ ตอนนี้เปิดไฟล์ \<font color="#2166ae">databaseutils dart\</font> และเลื่อนลงไปที่ \<font color="#2166ae">addpointers()\</font> เมธอด ที่นี่เราจะเพิ่มตรรกะสำหรับการเพิ่มพอยเตอร์ เราจะชี้ไปที่ james gosling ในฐานะผู้ก่อตั้งภาษา java ดังนั้นคุณจะต้องไปที่ back4app backend ของคุณและคัดลอกทั้ง \<font color="#2166ae">objectid\</font> ของผู้ก่อตั้ง (james gosling) และภาษา (java) การอัปเดต/สร้างพอยเตอร์ไปยังข้อมูล ดำเนินการต่อไปยังแอปของเราใน \<font color="#2166ae">databaseutils dart\</font> และใน \<font color="#2166ae">addpointers()\</font> เมธอดให้เริ่มต้น \<font color="#2166ae">string addpointerquery\</font> ซึ่งเราจะกำหนดคำสั่ง graphql สำหรับการเพิ่ม pointers ดังนี้ 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 '''; และเริ่มต้น \<font color="#2166ae">ตัวแปรสุดท้าย\</font> เพื่อกำหนดตัวแปร โปรดสังเกตว่าเรากำลังใช้ \<font color="#2166ae">rowobjectid\</font> และ \<font color="#2166ae">pointersid\</font> เป็นพารามิเตอร์ที่ \<font color="#2166ae">rowobjectid\</font> รหัสวัตถุของแถวที่เราจะชี้ไป \<font color="#2166ae">pointersid\</font> รหัสวัตถุไปยังแถวที่จะถูกชี้ ดังนั้นให้ประกาศ \<font color="#2166ae">ตัวแปร\</font> ดังนี้ 1 final variable={ 2 "userid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "link" pointersid 6 } 7 } 8 }; ตอนนี้เหมือนกับคู่มือสุดท้ายเราจะเริ่มต้น \<font color="#2166ae">graphqlclient\</font> และส่งคำถามด้วยความช่วยเหลือของ \<font color="#2166ae">queryoptions()\</font> และส่งคืนอินสแตนซ์ของมันด้วย \<font color="#2166ae">queryresults()\</font> 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; นี่คือวิธีที่วิธีการของคุณ \<font color="#2166ae">addpointers()\</font> ควรมีลักษณะดังนี้ 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 } รีสตาร์ทแอปของคุณตอนนี้ ไปที่ cm ปุ่มบนหน้าคำสั่งและกดปุ่ม add pointers ที่ตั้งไว้ ที่นี่ให้กรอก \<font color="#2166ae">objectid\</font> ของแถวที่ต้องการเพิ่มพอยเตอร์ในช่องข้อความแรกและ \<font color="#2166ae">objectid\</font> ของแถวที่มันจะชี้ไปในช่องข้อความที่สองแล้วกด เสร็จสิ้น ตอนนี้ตรวจสอบแดชบอร์ดของคุณและคุณจะต้องสามารถเห็นความสัมพันธ์ใต้ founder คอลัมน์ คุณสามารถคลิกที่มันซึ่งจะพาคุณไปยังแถวที่ชี้ไปยัง founder คลาส ลบพอยเตอร์ไปยังข้อมูล ตอนนี้ไปที่วิธีการ \<font color="#2166ae">deletepointers()\</font> ที่เราจะเขียนตรรกะเพื่อลบความสัมพันธ์ เพื่อที่จะลบความสัมพันธ์คุณเพียงแค่ต้องทำการเปลี่ยนแปลงเล็กน้อยในคำสั่งข้างต้น นั่นคือ ในตัวแปรเพียงแค่เปลี่ยน \<font color="#2166ae">"link"\</font> เป็น \<font color="#2166ae">"remove"\</font> ดังนั้นหลังจากการเริ่มต้น \<font color="#2166ae">ตัวแปรสุดท้าย\</font> มันจะเป็น 1 final variable={ 2 "languageid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "remove" pointersid 6 } 7 } 8 }; ทุกอย่างอื่นจะดูเหมือนเดิมเป๊ะเหมือนกับ \<font color="#2166ae">addpointers()\</font> ดังนั้นวิธีการของคุณ \<font color="#2166ae">deletepointers()\</font> ดูเหมือน 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 } คุณสามารถดำเนินการไปที่แดชบอร์ด back4app ของคุณและเห็นว่า คอลัมน์ผู้ก่อตั้งของแถวเฉพาะถูกลบออกแล้ว 3 การสร้าง/เพิ่มและลบข้อมูลวันที่ เวลา ถ้าคุณจำได้ว่าเราได้สร้างคลาส ownership ก่อนหน้านี้ใน step 1 และเก็บข้อมูลบางอย่างลงไป นี่คือชื่อของบริษัทที่เป็นเจ้าของภาษาโปรแกรม java ดังนั้นเรามาเริ่มป้อนวันที่ที่ได้มาเป็นเจ้าของกันเถอะ มาดำเนินการไปที่ \<font color="#2166ae">databaseutils dart\</font> และสร้างหรือเลื่อนลงไปที่ \<font color="#2166ae">adddatetime()\</font> ฟังก์ชัน ที่นี่เราจะเขียนตรรกะเพื่อเพิ่มประเภทข้อมูลวันที่ เวลาให้กับคลาสของเรา เริ่มต้น \<font color="#2166ae">string adddatetimequery\</font> และกำหนดให้มันเป็นคำสั่งสำหรับการสร้างข้อมูลวันที่ เวลา 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 '''; และ \<font color="#2166ae">ตัวแปรสุดท้าย\</font> เป็น 1 final variable={ 2 "rowid" rowobjectid, 3 "dateowned" datetime 4 }; ตอนนี้ให้เริ่มต้น \<font color="#2166ae">graphqlclient\</font> และส่งผ่านคำถามไปยัง \<font color="#2166ae">queryoption()\</font> นี่คือวิธีที่ฟังก์ชันของคุณจะมีลักษณะ 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 } ตอนนี้ hot restart แอปพลิเคชันและจดบันทึก objectid ของแถวที่มี sun microsystems ใน name คอลัมน์ กดปุ่ม add date time ตอนนี้ให้ป้อน objectid ที่จดไว้ในช่องข้อความแรกและ “02 24 1982” ในรูปแบบ mm dd yyyy ในวันที่ java ถูกเผยแพร่และกดปุ่ม done ดำเนินการไปที่ back4app backend ของคุณและคุณจะเห็นวันที่ในรูปแบบ 24 feb 1982 at 00 00 00 utc ซึ่งหมายความว่ามันได้ระบุประเภทข้อมูลเป็นประเภท date time แล้ว นอกจากนี้คุณยังสามารถเพิ่ม “01 27 2010” สำหรับ date owned สำหรับ oracle 4 การเพิ่ม/อัปเดตข้อมูล geopointer มาลองเพิ่มข้อมูล geopointer เพื่อระบุที่ตั้งสำนักงานใหญ่ของบริษัทจาก ownership ตาราง ดำเนินการไปที่ \<font color="#2166ae">database utils dart\</font> ไฟล์และเลื่อนลงไปที่ \<font color="#2166ae">addgeopointers()\</font> ฟังก์ชัน ตอนนี้ให้เริ่มต้น \<font color="#2166ae">string addgeopointers\</font> และกำหนดค่าคำสั่งที่เกี่ยวข้อง 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 '''; และ \<font color="#2166ae">ตัวแปรสุดท้าย\</font> เป็น 1 final variable={ 2 "objectid" rowobjectid, 3 "latitude" double parse(latitude), 4 "longitude" double parse(longitude), 5 }; เนื่องจาก \<font color="#2166ae">latitude\</font> และ \<font color="#2166ae">longitude\</font> เป็นค่าทศนิยม เราจำเป็นต้องแปลงจาก string เป็น double ก่อนที่จะส่งไป เริ่มต้น \<font color="#2166ae">grapqlclient\</font> และส่งผ่านคำสั่งด้วย \<font color="#2166ae">queryoption()\</font> นี่คือวิธีที่ฟังก์ชัน \<font color="#2166ae">addgeopointers()\</font> ของคุณจะมีลักษณะ 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 } ทำการรีสตาร์ทแอปของคุณและเลือก เพิ่ม geopointers ปุ่ม ป้อน \<font color="#2166ae">37 35\</font> ในกล่องข้อความแรกและ \<font color="#2166ae">121 95\</font> ในกล่องข้อความที่สอง ป้อน objectid ของแถวที่มี sun microsystems เป็น ชื่อ และกดเสร็จสิ้น ตอนนี้ไปที่ back4app backend ของคุณและคุณจะเห็น (37 35, 121 95) ซึ่งเป็นพิกัดของสำนักงานใหญ่และระบุว่ามันเป็น geopointers 5 การเพิ่ม/อัปเดตและการลบความสัมพันธ์ ในพอยเตอร์เราสามารถชี้ไปที่แถวเดียวเท่านั้น แต่ด้วยความช่วยเหลือของความสัมพันธ์เราสามารถเชื่อมต่อกับหลายแถวได้ ดังนั้นให้เราสร้างความสัมพันธ์ของ ตารางภาษา กับสองแถวนี้สำหรับ ความเป็นเจ้าของ ของ ภาษา java การเพิ่ม/อัปเดตความสัมพันธ์ ดำเนินการไปที่ \<font color="#2166ae">database utils dart\</font> ไฟล์และดำเนินการไปที่ \<font color="#2166ae">addrelation()\</font> ฟังก์ชันสำหรับเขียนตรรกะ เริ่มต้น \<font color="#2166ae">string addrelationquery\</font> และกำหนดคำสั่งสำหรับความสัมพันธ์ดังนี้ 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 '''; และ \<font color="#2166ae">ตัวแปรสุดท้าย\</font> จะเป็น 1 final variable= { 2 "objectid" objectid, 3 "relationid" relationid 4 }; ดังนั้นหลังจากเริ่มต้น \<font color="#2166ae">graphqlclient\</font> และส่งผ่านคำสั่งเหมือนเดิม นี่คือวิธีที่ \<font color="#2166ae">database utils dart\</font> ของคุณจะดูเหมือน 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 } สำเร็จ แอปของคุณได้จัดเก็บข้อมูลเชิงสัมพันธ์, วันที่และเวลา และ geopointers บน back4app เรียบร้อยแล้ว! บทสรุป ในคู่มือนี้เราได้เรียนรู้วิธีการจัดเก็บข้อมูลเชิงสัมพันธ์บน back4app โดยใช้ graphql จากโปรเจกต์แอป flutter นอกจากนี้เรายังได้ทำงานกับการเปลี่ยนแปลง graphql อื่น ๆ เช่น geopointers และวันที่และเวลา การสร้าง, การอัปเดต และการลบข้อมูล ในบทเรียนถัดไปเราจะเจาะลึกเข้าไปในคำค้นหาสำหรับแอป flutter ของเรา คู่มือนี้เขียนโดย asim junain จาก hybrowlabs https //www back4app com/partners/software development company