ความเข้ากันได้ Parse 3.10+ กับ Relay สำหรับนักพัฒนา

ความเข้ากันได้ของ relay บทนำ parse server graphql api ปฏิบัติตามมาตรฐานล่าสุดที่มีอยู่ในปัจจุบันสำหรับ api ที่สามารถขยายได้สูงและโครงการด้านหน้าแบบทะเยอทะยาน ทีม parse open source เลือกที่จะปฏิบัติตาม graphql server relay https //relay dev/docs/en/graphql server specification มาตรฐาน relay เป็นเฟรมเวิร์ก javascript สำหรับการสร้างแอปพลิเคชัน react ที่ขับเคลื่อนด้วยข้อมูลซึ่งใช้ graphql ออกแบบมาให้ใช้งานง่าย ขยายได้ และที่สำคัญที่สุดคือมีประสิทธิภาพ relay ทำสิ่งนี้ได้ด้วยการใช้คำถามแบบสถิติและการสร้างโค้ดล่วงหน้า เริ่มตั้งแต่ parse 3 10 ความเข้ากันได้เต็มรูปแบบกับ relay https //relay dev/docs/en/graphql server specification ได้ถูกนำไปใช้ เอกสารนี้จะพาคุณไปผ่านการใช้งานเหล่านั้น ข้อกำหนดเบื้องต้น ในการเริ่มต้นบทเรียนนี้ คุณจะต้องมี แอปที่สร้างขึ้นที่ back4app ดูที่ บทเรียนการสร้างแอปใหม่ เพื่อเรียนรู้วิธีการสร้างแอปที่ back4app 1 สร้างแอป back4app ใหม่ ก่อนอื่น คุณต้องมั่นใจว่าคุณมีแอปที่สร้างขึ้นที่ back4app อยู่แล้ว อย่างไรก็ตาม หากคุณเป็นผู้ใช้ใหม่ คุณสามารถตรวจสอบ บทเรียนนี้ https //www back4app com/docs/get started/new parse app เพื่อเรียนรู้วิธีการสร้างหนึ่ง 2 สร้างคลาสบางคลาส ในแอปที่คุณสร้างขึ้นใหม่ ให้ไปที่ database browser database browser และคลิกที่ สร้างคลาส สร้างคลาส ปุ่ม เลือกที่จะสร้าง คลาสที่กำหนดเอง คลาสที่กำหนดเอง และตั้งชื่อให้มัน ตาม สคีม่าแบบตัวอย่างของ relay https //relay dev/docs/en/graphql server specification#schema , ฉันได้สร้างคลาส faction, ship, และอื่น ๆ ตามที่อธิบายพร้อมกับคุณสมบัติที่ตรงกัน แต่คุณสามารถสร้างคลาสของคุณเองตามเอกสารนี้ได้ เพียงแค่เปลี่ยนคำถามและการเปลี่ยนแปลงของคุณให้เหมาะสม จำไว้ว่าตามธรรมเนียม คลาสจะเริ่มต้นด้วยตัวอักษรตัวใหญ่ ใช้ camelcase และไม่ควรมีอักขระพิเศษเช่นช่องว่างและสัญลักษณ์ คลิก สร้างคลาส สร้างคลาส เมื่อคุณทำเสร็จแล้ว 3 graphql คอนโซล เมื่อคุณสร้างคลาสและคุณสมบัติแล้ว คุณสามารถไปที่ api คอนโซล api คอนโซล และจากนั้น graphql คอนโซล graphql คอนโซล เพื่อดำเนินการสอบถามและการเปลี่ยนแปลงของคุณ 4 การสอบถาม การสอบถามครั้งแรกของเราจะดึงวัตถุตาม objectid objectid (ไม่ให้สับสนกับ id id ) parse ได้พัฒนาและตอนนี้การสอบถามสนับสนุนทั้ง objectid objectid , ซึ่งก่อนหน้านี้รู้จักในชื่อ id id ในเวอร์ชันก่อนหน้านี้ แต่ตอนนี้ยังสนับสนุน global id global id , ซึ่งรู้จักในชื่อ id id , ซึ่งหมายถึง id ทั่วไปของ relay และมีรูปแบบที่ยาวขึ้นเนื่องจากมีชื่อคลาสที่เข้ารหัสอยู่ในนั้น ตัวอย่างของ objectid objectid eat0ddk09v ตัวอย่างของ id id (หรือที่เรียกว่า global id) rmfjdglvbjpfyvqwzerrmdl2 มาทำการสอบถามครั้งแรกของเราที่ดึงวัตถุตาม objectid objectid 1 query rebelsquery { 2 faction(id "eat0ddk09v") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } นั่นจะส่งออก 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } ตอนนี้ มาลองเปลี่ยนเป็น globalid สำหรับ relay 1 query rebelsquery { 2 faction(id "rmfjdglvbjpfyvqwzerrmdl2") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } และสังเกตว่าผลลัพธ์จะเหมือนเดิม 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } สิ่งนี้เกิดขึ้นเพราะว่า global id global id ทำงานตามที่ชื่อบอกไว้ ว่าทั่วโลก และมีชื่อคลาสที่เข้ารหัสอยู่ในนั้น ดังนั้น parse จึงรู้ว่าจะค้นหา id นั้นที่ไหน 5 การดึงข้อมูลใหม่ นอกจากนี้ด้วย global id global id คุณสามารถดึงข้อมูลล่วงหน้าได้เช่น ข้อกำหนดของ relay https //relay dev/docs/en/graphql server specification#object identification ดังนี้ 1 query refetchquery{ 2 node(id "rmfjdglvbjpfyvqwzerrmdl2"){ 3 id on faction{ 4 name 5 } 6 } 7 } ซึ่งจะส่งผลให้ 1 { 2 "data" { 3 "node" { 4 "id" "rmfjdglvbjpfyvqwzerrmdl2", 5 "name" "galactic empire" 6 } 7 } 8 } 6 การเชื่อมต่อ การเชื่อมต่อของ relay https //relay dev/docs/en/graphql server specification#connections ทำงานในลักษณะเดียวกันใน parse กับ graphql ดังนั้น หากคุณต้องการดึงเรือของ rebel 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships{ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } ซึ่งจะส่งผลลัพธ์ 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "node" { 10 "name" "y wing" 11 } 12 }, 13 { 14 "node" { 15 "name" "x wing" 16 } 17 } 18 ] 19 } 20 } 21 } 22 } คุณยังสามารถดึงเรือที่ n ได้ 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1){ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } ส่งผลให้ 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 cursor 10 "node" { 11 "name" "y wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } หรือดึงเรือที่ n หลังจากเรือเฉพาะ โดยใช้ค่า cursor ของมัน 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1 after "yxjyyxljb25uzwn0aw9uoja"){ #cursor for the y wing ship 6 edges{ 7 cursor 8 node{ 9 name 10 } 11 } 12 } 13 } 14 } ซึ่งจะดึงข้อมูล 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "cursor" "yxjyyxljb25uzwn0aw9uoje=", 10 "node" { 11 "name" "x wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } 7 การเปลี่ยนแปลง เรายังสามารถใช้การเปลี่ยนแปลงที่เข้ากันได้กับ การเปลี่ยนแปลงของ relay https //relay dev/docs/en/graphql server specification#mutations มาสร้าง เรือ เรือ 1 mutation createbwing($input createshipinput!){ 2 createship(input $input){ 3 ship{ 4 id 5 name 6 } 7 } 8 } ที่ต้องการตัวแปร query ดังต่อไปนี้ 1 { 2 "input" { 3 "fields" { 4 "name" "b wing" 5 } 6 } 7 } และจะส่งคืน global id global id และ ชื่อ ชื่อ ตามที่ระบุในการเปลี่ยนแปลง 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }