ความเข้าใจพื้นฐานเกี่ยวกับ Relay และ GraphQL ใน React Native

เริ่มต้นกับ graphql relay บทนำ ในคู่มือนี้คุณจะได้เรียนรู้ว่า relay คืออะไร วิธีการทำงานกับ schema และเข้าใจวิธีการทำงานกับ graphql บน back4app ข้อกำหนดเบื้องต้น นี่ไม่ใช่บทเรียนในขณะนี้ แต่เพื่อให้คุณรู้สึกสบายใจในการอ่าน คุณจะต้องมี ความรู้พื้นฐานเกี่ยวกับ javascript ความเข้าใจพื้นฐานเกี่ยวกับ graphql หากคุณไม่มี ให้ไปที่ https //github com/graphql/graphql js มันเป็นสถานที่ที่เหมาะสมในการเริ่มต้น relay relay เป็นไคลเอนต์ graphql ที่พัฒนาโดยทีมวิศวกรรมของ facebook และออกแบบมาเพื่อประสิทธิภาพเมื่อสร้างแอปพลิเคชันที่ขับเคลื่อนด้วยข้อมูล โดยเฉพาะอย่างยิ่ง relay เป็นกรอบงานสำหรับการดึงข้อมูลและจัดการข้อมูล graphql บนฝั่งไคลเอนต์ที่ใช้แนวทางที่เข้มงวดเพื่อช่วยให้แอปพลิเคชันของคุณประสบความสำเร็จ มันถูกสร้างขึ้นโดยคำนึงถึงความสามารถในการขยายตัวเพื่อรองรับแอปพลิเคชันที่ซับซ้อนเช่น facebook เป้าหมายสูงสุดของ graphql และ relay คือการส่งมอบการตอบสนอง ui ที่ทันที หนึ่งในข้อดีหลักของการใช้ graphql คือคุณสามารถดึงข้อมูลทั้งหมดที่จำเป็นในการสร้างหน้าแอปพลิเคชันด้วยคำถามเดียว ตัวอย่างเช่น แน่นอนว่านี่เป็นสิ่งที่ดี (คุณสามารถประหยัดการเดินทางไปยังเซิร์ฟเวอร์) แต่ก็มีปัญหาตามมา คุณอาจใช้คำถามที่แตกต่างกันกับคอมโพเนนต์เดียวกันเมื่อใช้คอมโพเนนต์นี้ในส่วนต่าง ๆ ของแอปพลิเคชันของคุณ เพื่อหลีกเลี่ยงปัญหานี้ relay ใช้แนวคิดที่สำคัญ การจัดวางร่วมกัน การจัดวางร่วมกัน เมื่อใช้ relay ความต้องการข้อมูลของคอมโพเนนต์และคอมโพเนนต์จะอยู่ด้วยกัน ความต้องการข้อมูลของคอมโพเนนต์จะถูกประกาศภายในคอมโพเนนต์นั้น นั่นหมายความว่าคอมโพเนนต์ทั้งหมดประกาศข้อมูลที่พวกเขาต้องการ relay จะทำให้แน่ใจว่าคอมโพเนนต์แต่ละตัวมีข้อมูลที่ต้องการเมื่อทำการเรนเดอร์ โครงสร้าง relay ที่อยู่เบื้องหลังแนวคิดการจัดวางร่วมกันคือคอนเทนเนอร์ คอนเทนเนอร์ที่พบบ่อยที่สุดคือ relay fragment container คอนเทนเนอร์คือคอมโพเนนต์ที่พยายามตอบสนองความต้องการข้อมูลเมื่อทำการเรนเดอร์คอมโพเนนต์แต่ละตัว คอนเทนเนอร์จะประกาศความต้องการข้อมูลของพวกเขาโดยใช้ graphql fragments คอมโพเนนต์แต่ละตัวจะมีคอนเทนเนอร์ fragment ของตัวเอง คอนเทนเนอร์จะไม่ดึงข้อมูลโดยตรง; มันเพียงแค่ประกาศข้อกำหนดสำหรับข้อมูลที่จำเป็นเมื่อทำการเรนเดอร์ ข้อมูลจะถูกดึงจากเซิร์ฟเวอร์ relay จะทำให้แน่ใจว่าข้อมูลพร้อมใช้งานก่อนที่การเรนเดอร์จะเกิดขึ้น relay จะประกอบต้นไม้ของข้อมูลด้วยคอนเทนเนอร์เหล่านั้น โดยไม่สนใจความซ้ำซ้อน และดึงข้อมูลจากเซิร์ฟเวอร์ มาลองอธิบายแนวคิดด้วยตัวอย่างกันดีกว่า fragment คือการเลือกฟิลด์บนประเภท graphql relay ทำงานกับ fragment, pagination และ refetch container คอนเทนเนอร์ fragment เป็นสิ่งที่พบบ่อยที่สุด ดูด้านล่างเป็น fragment ใน graphql และหลังจากนั้นเป็น fragment เดียวกันใน relay 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4&#x9; 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12&#x9; 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20&#x9; 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); ในโค้ดแรกคุณสามารถเห็นเวอร์ชัน graphql ที่อนุญาตให้เราสามารถแยกคำขอนี้ออกเป็นส่วนที่นำกลับมาใช้ใหม่ได้ ในโค้ดถัดไปคุณสามารถเห็นเวอร์ชัน relay ที่แสดงส่วนและข้อมูลร่วมกันในคอมโพเนนต์เดียว การจัดวางร่วมหมายถึงการที่การกำหนดข้อมูลและการกำหนดมุมมองอยู่ร่วมกัน การจัดวางร่วมมีข้อดีบางประการ เราเพียงแค่ต้องประกาศวันที่เราต้องการอย่างชัดเจน นั่นหมายความว่ามันยากที่จะดึงข้อมูลมากเกินไปซึ่งช่วยปรับปรุงแอปพลิเคชันของเราและยากที่จะดึงข้อมูลน้อยเกินไปซึ่งป้องกันข้อผิดพลาดจากข้อมูลที่ขาดหายไป อีกแนวคิดที่สำคัญคือการปกปิดข้อมูลซึ่งหมายความว่าคอมโพเนนต์สามารถเข้าถึงข้อมูลที่พวกเขาขอได้เท่านั้น การปกปิดข้อมูลช่วยป้องกันข้อผิดพลาดจากการพึ่งพา นอกจากนี้ คอมโพเนนต์จะได้รับการอัปเดตเฉพาะเมื่อข้อมูลที่พวกเขาใช้มีการเปลี่ยนแปลง ตัวเรนเดอร์คำขอที่ทันสมัย เราขอแนะนำให้ดูที่ https //relay dev/docs/en/query renderer html#docsnav เพื่อความเข้าใจที่ดีขึ้น ตามที่เก็บส่วน relay จะอ่านและทำการร้องขอไปยังเซิร์ฟเวอร์ตามข้อมูลที่พวกเขามี แต่การร้องขอนี้เกิดขึ้นได้อย่างไร? นี่คือที่ที่ตัวเรนเดอร์คำขอที่ทันสมัยเข้ามา ตัวเรนเดอร์คำขอที่ทันสมัยคือคอมโพเนนต์ที่อ่านเก็บส่วน ทำการร้องขอไปยังเซิร์ฟเวอร์และส่งคืนข้อมูลไปยังคอมโพเนนต์ คอมโพเนนต์รากแต่ละตัวจะมีตัวเรนเดอร์คำขอที่ทันสมัยทำการร้องขอนี้ ในตัวอย่างข้างต้นเรามีการทำให้เป็นนามธรรมเพื่อให้เราส่งเพียงเก็บส่วนที่ต้องอ่านและงานที่เหลือทั้งหมดจะทำภายใน createqueryrenderermodern ในขั้นตอนถัดไปของเอกสาร เราจะเข้าสู่ createqueryrenderermodern เพื่อทำความเข้าใจการทำงานของ abstraction ตามตัวอย่างที่บริสุทธิ์ข้างต้น ด้านล่างนี้คือตัวอย่างที่บริสุทธิ์ของ query render modern 1 export default function artistrenderer({artistid}) { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql` 6 query queryrenderersartistquery($artistid string!) { 7 # the root field for the query 8 artist(id $artistid) { 9 # a reference to your fragment container 10 artistheader artist 11 } 12 } 13 `} 14 variables={ {artistid} } 15 render={({error, props}) => { 16 if (error) { 17 return \<div>{error message}\</div>; 18 } else if (props) { 19 return \<artist artist={props artist} />; 20 } 21 return \<div>loading\</div>; 22 }} 23 /> 24 ); 25 } เราสามารถเห็นว่า query renderer modern เป็น https //reactjs org/docs/higher order components html กล่าวอีกนัยหนึ่งคือ ห่อหุ้มคอมโพเนนต์ที่เป็นเจ้าของ container ที่มีข้อมูลที่จะร้องขอ ทำการร้องขอด้วย relay environment และส่งคืนข้อมูลไปยังด้านล่างโดยส่งไปยังคอมโพเนนต์ การสร้างประเภทอัตโนมัติ การทำงานกับ relay เราสามารถสร้างแอปพลิเคชันได้อย่างปลอดภัยตามประเภท ดังที่เราได้กล่าวไว้ว่าแต่ละคอมโพเนนต์จะเป็นเจ้าของข้อมูลของตนเอง ดังนั้นเมื่อเรารัน relay compiler มันจะอ่านทุก fragment ของข้อมูลและทำการตรวจสอบกับ graphql schema ของคุณ หากการตรวจสอบทั้งหมดของ relay compiler ผ่าน ก็จะสร้างประเภทในโฟลเดอร์ที่เรียกว่า generated โฟลเดอร์นี้จะถูกสร้างขึ้นภายในโฟลเดอร์คอมโพเนนต์ราก ดูตัวอย่างด้านล่าง ตรวจสอบสุขภาพ api ของคอมโพเนนต์โฮม 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8&#x9; 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16&#x9; 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); โฟลเดอร์ที่สร้างขึ้นซึ่งมีประเภทสำหรับคอมโพเนนต์โฮม และประเภทที่สร้างขึ้น หลังจากนี้เราต้องนำเข้าประเภทในคอมโพเนนต์และประกอบมัน 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; ประเภทถูกสร้างขึ้นใน flow ซึ่งเป็นภาษาหลักสำหรับประเภทจาก facebook แต่ด้วยไลบรารีคุณสามารถสร้างใน typescript ได้ นี่เป็นสิ่งที่พบได้บ่อยที่สุดในการทำงานกับ react native สรุปแล้วด้วย relay compiler เราสามารถตรวจสอบการใช้งานข้อมูลก่อนเวลาทำงาน ซึ่งช่วยให้เราหลีกเลี่ยงข้อผิดพลาดและปรับปรุงคุณภาพของแอปพลิเคชันและเวลาการพัฒนา ในคำถาม เราสามารถหลีกเลี่ยงข้อมูลซ้ำซ้อนในคอมโพเนนต์ n ตัวได้ มันตรวจสอบว่าข้อมูลบางอย่างซ้ำซ้อนหรือไม่ หากมีมันจะลบความซ้ำซ้อนออก สิ่งนี้จะช่วยลดขนาดข้อมูลที่ส่งในคำถามและเพิ่มประสิทธิภาพของแอปพลิเคชันให้มากขึ้น การพัฒนา ในคำถาม เราสามารถหลีกเลี่ยงข้อมูลซ้ำซ้อนในคอมโพเนนต์ n ตัวได้ มันตรวจสอบว่าข้อมูลบางอย่างซ้ำซ้อนหรือไม่ หากมีมันจะลบความซ้ำซ้อนออก สิ่งนี้จะช่วยลดขนาดข้อมูลที่ส่งในคำถามและเพิ่มประสิทธิภาพของแอปพลิเคชันให้มากขึ้น ในฝั่งเซิร์ฟเวอร์ back4app back4app สร้าง graphql api ที่สอดคล้องกับ relay ที่พร้อมใช้งานสำหรับโปรเจกต์ของคุณ สิ่งที่ back4app สร้างให้คุณเพื่อที่คุณจะไม่ต้องสร้างด้วยตัวเองในฝั่งเซิร์ฟเวอร์ โครงสร้างพื้นฐาน ในแดชบอร์ด back4app คุณสามารถสร้างโมเดลข้อมูลที่สมบูรณ์ด้วยคลาส ประเภท และทุกสิ่งที่ฐานข้อมูลต้องการ คุณไม่ต้องกังวลเกี่ยวกับการตั้งค่าและการดูแลเซิร์ฟเวอร์ด้วยตัวเอง หลังจากสร้างโมเดลข้อมูลของคุณ back4app จะสร้างทุกสิ่งที่จำเป็นเพื่อใช้ในด้านหน้าโดยใช้ graphql มาดูที่สคีมาของ graphql api กันเถอะ สคีมา ไฟล์สคีมาเป็นแกนหลักของแอปพลิเคชัน graphql ใด ๆ มันอธิบายเซิร์ฟเวอร์ทั้งหมดที่สามารถใช้ในด้านลูกค้า relay ทำงานโดยใช้ไฟล์สคีมาของคุณเพื่อยืนยันคำถาม สตริงและไฟล์ที่สร้างขึ้นเพื่อปรากฏใน / generated /mycomponent graphql ตามที่เราได้กล่าวไว้ในหัวข้อ การสร้างประเภทอัตโนมัติ ในการใช้ relay compiler คุณต้องมีไฟล์สคีมาของ graphql ที่เป็น graphql หรือ json ซึ่งอธิบาย api ของเซิร์ฟเวอร์ graphql ของคุณ ไฟล์เหล่านี้เป็นการแทนที่ท้องถิ่นของแหล่งข้อมูลที่เชื่อถือได้ของเซิร์ฟเวอร์และไม่ถูกแก้ไข ทุกสคีมาของ graphql สามารถประกอบด้วยประเภทคำถาม ประเภทการเปลี่ยนแปลง และประเภทการสมัครสมาชิก เพื่อทำงานกับสคีมาที่ถูกใช้โดย relay ในด้านหน้า คุณต้องมีแนวคิดหลักบางประการในด้านหลัง อินเตอร์เฟซโหนดและการเชื่อมต่อ เราขอแนะนำให้อ่านเกี่ยวกับอินเตอร์เฟซโหนดและการเชื่อมต่อ relay เพื่อทำให้การอ่านนี้ง่ายขึ้นในการทำความเข้าใจ โครงสร้างของโหนด โครงสร้างของโหนดจะใช้ทุกประเภทใน graphql เพื่อช่วยดึงข้อมูลผ่าน id นี่คือการนำไปใช้เพื่อให้การดึงข้อมูลจากเซิร์ฟเวอร์และการอัปเดตทำได้ง่ายขึ้น ดังนั้นข้อมูลแต่ละประเภทจะมี id ที่ไม่ซ้ำกัน เรียกว่า global unique id ซึ่งถูกนำไปใช้โดยโครงสร้างของโหนด ด้วยโหนด relay จะหลีกเลี่ยงการสอบถามซ้อนและทำให้การดึงและดึงข้อมูลใหม่ทำได้ง่าย นี่เป็นเรื่องยากที่จะนำไปใช้และต้องใช้ความพยายามเล็กน้อย แต่เราสร้างสิ่งนี้ให้คุณแล้ว! การแบ่งหน้า สร้างขึ้นเพื่อให้สามารถประกอบได้ ทั้งในด้านหน้าและด้านหลัง relay จะช่วยเราในการประกอบข้อมูลของเรา สำหรับการทำงานกับการแบ่งหน้าเรามีการเชื่อมต่อ การเชื่อมต่อนั้นจะนำโหนดจากประเภทที่เรากำลังดึงข้อมูลและมีโมเดลมาตรฐาน ทำให้การนำไปใช้การแบ่งหน้าในฝั่งเซิร์ฟเวอร์ทำได้ง่าย โชคดีที่เรามีสิ่งนี้สร้างขึ้นมาแล้วเพื่อใช้ในด้านหน้า บทสรุป ในคู่มือนี้เราได้แนะนำว่า relay คืออะไร แนวคิดหลักของมันและวิธีการทำงาน นอกจากนี้เรายังเห็นว่า back4app ทำให้การสร้างเซิร์ฟเวอร์ graphql เป็นไปโดยอัตโนมัติและมอบฐานข้อมูลที่สมบูรณ์พร้อม api graphql ให้เราใช้งาน สรุปได้ว่าทั้งหมดของแบ็กเอนด์ถูกสร้างขึ้นโดย back4app แล้ว คุณเพียงแค่ต้องสร้างประเภทของคุณในแดชบอร์ดและเริ่มใช้งานตามสคีมาที่สร้างขึ้น ในส่วนถัดไปเราจะอธิบายวิธีจัดการกับสคีมานี้ในด้านหน้าและเตรียมสภาพแวดล้อมของคุณเพื่อใช้ relay เรายังมี https //www back4app com/docs/parse graphql/graphql getting started , คุณสามารถใช้มันเพื่อช่วยให้คุณเข้าใจแนวคิดเพิ่มเติมในแดชบอร์ดของเรา