การติดตั้ง Relay สำหรับโปรเจกต์ React Native

การตั้งค่า relay บทนำ ในคู่มือก่อนหน้านี้ เราได้เรียนรู้วิธีการรับไฟล์สคีมา บันทึกมัน และวางมันในแอปพลิเคชัน react native ของเรา ในคู่มือนี้ เราจะติดตั้ง relay และเตรียมสภาพแวดล้อมของเราเพื่อเริ่มพัฒนาแอปพลิเคชัน react native เป้าหมาย เพื่อที่จะตั้งค่า relay เราจะต้องติดตั้ง relay ในแอปพลิเคชัน react native ของเราก่อน และจากนั้นเตรียมสภาพแวดล้อม relay ข้อกำหนดเบื้องต้น เราขอแนะนำให้มีความเข้าใจพื้นฐานเกี่ยวกับหัวข้อต่อไปนี้ https //relay dev/ , https //babeljs io/ , javascript (ecs5 และ ecs6), https //github com/graphql/graphql js readme โปรเจกต์ react native พื้นฐานที่ทำงานในสภาพแวดล้อมท้องถิ่นของคุณ ไฟล์ schema graphql ที่ดาวน์โหลดในโปรเจกต์ react native ของคุณ ในขั้นตอนถัดไป คุณจะพบการติดตั้ง relay พื้นฐานที่มุ่งเน้นไปที่แอปพลิเคชัน react native หากคุณต้องการเจาะลึกในหัวข้อนี้ โปรดเยี่ยมชม https //relay dev/docs/en/installation and setup#docsnav 1 การติดตั้ง react relay official api เริ่มติดตั้งไลบรารีอย่างเป็นทางการ react relay ไลบรารีนี้เป็น api อย่างเป็นทางการของทีม relay core และมีทุกอย่างที่จำเป็นในการสร้างข้อมูลส่วนต่างๆ 1 yarn add react relay\@10 0 0 สำคัญ ติดตั้ง relay modern สำหรับบทเรียนนี้โดยใช้เวอร์ชัน 10 0 0 ตั้งแต่เวอร์ชัน 11 0 0 วิธีการใช้ react relay จะเปลี่ยนไปเนื่องจาก hooks ใหม่ 2 การกำหนดค่า relay การกำหนดค่า relay มีข้อมูลที่จำเป็นสำหรับ relay compiler ภายในนั้นเราจะระบุว่า relay compiler สามารถค้นหา schema file ได้ที่ไหน, โฟลเดอร์ใดที่ควรมองหา, และการกำหนดค่าอื่นๆ มาติดตั้งแพ็คเกจ relay config กันก่อน 1 yarn add dev relay config หมายเหตุ บทเรียนนี้ใช้ yarn เป็นไคลเอนต์แพ็คเกจ แต่คุณสามารถใช้ npm ได้เช่นกัน ตอนนี้เรามาสร้างไฟล์การกำหนดค่า relay ที่ relay จะค้นหาเส้นทาง schema สร้างไฟล์ใหม่ภายในรากของแอปพลิเคชัน ตั้งชื่อว่า relay config js เปิดไฟล์และบันทึกด้วยข้อมูลด้านล่าง 1 module exports = { 2 schema ' /data/schema graphql', 3 src ' /', 4 }; 3 relay babel plugin ในการแปลง graphql artifacts ขณะทำงาน เราจำเป็นต้องติดตั้ง babel plugin 1 yarn add dev babel plugin relay graphql ตอนนี้ภายในไฟล์การกำหนดค่า babel ของคุณ คุณต้องเพิ่ม relay babel plugin ลงในอาร์เรย์ของ plugins ไฟล์ babel config js สุดท้ายจะมีลักษณะดังนี้ 1 { 2 "plugins" \[ 3 "relay" 4 ] 5 } ในโปรเจกต์ expo ให้ทำตามวิธีเดียวกันโดยการเพิ่มอาร์เรย์ของ plugins ภายใน babel config js ทันทีหลังจากอาร์เรย์ของ presets ผลลัพธ์สุดท้ายควรมีลักษณะดังนี้ 1 module exports = function (api) { 2 api cache(true); 3 return { 4 presets \[ 5 "babel preset expo", 6 ], 7 plugins \[ 8 'relay' 9 ] 10 }; 11 }; ปลั๊กอิน relay ต้องทำงานก่อนปลั๊กอินอื่น ๆ เพื่อการแปลง graphql artifacts ที่ถูกต้อง ตรวจสอบเอกสารปลั๊กอิน babel เพื่อทราบข้อมูลเพิ่มเติม 4 relay compiler ตั้งแต่เอกสารฉบับแรกของเรา เราได้อธิบายเกี่ยวกับ relay compiler สำหรับแอปพลิเคชันของเราในการคอมไพล์ข้อมูล fragment เราจะติดตั้งมันตอนนี้ 1 yarn add dev relay compiler มาลองเปิด package json ของเราและกำหนดคำสั่งสคริปต์ใหม่เพื่อเรียกใช้ relay compiler 1 " relay relay " " relay compiler relay compiler watchman false watchman false " watchman มีหน้าที่ในการกำหนดว่า relay compiler ต้องมองหาการเปลี่ยนแปลงใด ๆ ใน fragment ของ relay หรือไม่ หากเป็นจริงมันจะทำงานใหม่ทุกครั้งที่มีการเปลี่ยนแปลง หากเป็นเท็จมันจะทำงานหลังจากที่คุณเรียกใช้ yarn relay ด้วยตัวเอง ไฟล์ package json ควรมีลักษณะดังนี้ 1 "scripts" { 2 "android" "react native run android", 3 "ios" "react native run ios", 4 "start" "react native start", 5 "test" "jest", 6 "lint" "eslint ", 7 "relay" "relay compiler watchman false" 8 }, 5 รันคำสั่ง yarn relay สุดท้าย เมื่อขั้นตอนการติดตั้งเสร็จสิ้น เราสามารถรันคำสั่ง yarn relay ที่รากของแอปพลิเคชัน 1 yarn relay เนื่องจากเราไม่ได้สร้างข้อมูลแฟร็กเมนต์ใด ๆ คอมไพเลอร์ relay จะส่งคืนไฟล์ที่เปลี่ยนแปลง ดีมาก แอปพลิเคชันของคุณได้ติดตั้งและกำหนดค่า relay เรียบร้อยแล้ว ตอนนี้เรามา implement สภาพแวดล้อมของเราเพื่อเริ่มทำการร้องขอไปยังเซิร์ฟเวอร์ back4app กันเถอะ 6 เตรียมสภาพแวดล้อมสำหรับการดึงข้อมูล สภาพแวดล้อมของ relay กำหนดวิธีที่เลเยอร์เครือข่ายจะจัดการกับคำขอและวิธีที่ relay store จะต้องทำงาน สโตร์ควบคุมข้อมูลของเราบน frontend โดยการอัปเดตเฉพาะเมื่อมีการเปลี่ยนแปลงและเก็บข้อมูลไว้ในแคช สภาพแวดล้อมที่ง่ายจะต้องมีอย่างน้อยเลเยอร์เครือข่ายและสโตร์ ชั้นเครือข่าย การ https //relay dev/docs/en/network layer ง่ายต่อการสร้าง มันจะจัดการคำขอแต่ละคำขอของแอปพลิเคชันของเรา ทำการสอบถาม การเปลี่ยนแปลง และการสมัครสมาชิก (หากแอปพลิเคชันของคุณรองรับ) การใช้ relay จะรู้วิธีเตรียมการเรียกเพื่อเข้าถึงเซิร์ฟเวอร์แอปพลิเคชัน ร้าน relay ร้าน https //relay dev/docs/en/relay store html มีหน้าที่ในการอัปเดตข้อมูลของแอปพลิเคชันของเราบนฝั่งไคลเอนต์ คำขอแต่ละคำขอสามารถมีฟังก์ชันอัปเดตได้ ภายในฟังก์ชันอัปเดต คุณสามารถใช้รายการฟังก์ชันช่วยเพื่ออัปเดตข้อมูลของคุณด้วย store interface เพื่อเตรียมสภาพแวดล้อม relay เราจำเป็นต้องสร้างไฟล์กำหนดค่าของสภาพแวดล้อม ไฟล์นี้จะถูกอ่านโดย query renderer ทุกครั้งที่มีการดำเนินการสอบถาม มาจัดเตรียมไฟล์นี้กันเถอะ 6 1 สร้างไฟล์สภาพแวดล้อม เราจะปฏิบัติตามหลักการออกแบบจาก relay library แนวคิดการจัดวาง เพื่อเริ่มต้น มาสร้างโฟลเดอร์ที่รากของแอปพลิเคชันและตั้งชื่อว่า relay ภายในนั้นให้สร้างไฟล์และตั้งชื่อว่า environment js environment js 6 2 กำหนดค่าพื้นที่ หลังจากนั้น นำเข้าจาก relay runtime relay runtime สิ่งที่เราต้องการทั้งหมด 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 กำหนดค่า network layer network layer ต้องการฟังก์ชันในการดึงข้อมูลจากเซิร์ฟเวอร์ ก่อนอื่น มาสร้างฟังก์ชัน fetch ที่รับผิดชอบในการทำ post request 1 const fetchquery = async (request, variables) => { 2 const body = json stringify({ 3 query request text, 4 variables, 5 }); 6	 7 const headers = { 8 accept 'application/json', 9 'content type' 'application/json', 10 'x parse application id' 'x parse application id', 11 'x parse client key' 'x parse client key', 12 }; 13	 14 try { 15 const response = await fetch(`https //parseapi back4app com/graphql`, { 16 method 'post', 17 headers, 18 body, 19 }); 20 21 const data = await response json(); 22 23 if (data errors) { 24 throw data errors; 25 } 26 27 return data; 28 } catch (err) { 29 console log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; เราห่อหุ้มคำขอสำหรับ backend โดยใช้ try catch หากเกิดข้อผิดพลาดจะถูกโยนออกมาและแอปพลิเคชันจะจัดการกับมัน มิฉะนั้นจะทำตามพฤติกรรมปกติและส่งคืนข้อมูล ใน network layer นี่คือที่ที่คุณกำหนดการเชื่อมต่อกับเซิร์ฟเวอร์แอปพลิเคชันของคุณ ที่ back4app เราใช้คีย์หลักสองตัว application id และ client key คีย์เหล่านี้ต้องถูกระบุใน headers พร้อมกับ url ของเซิร์ฟเวอร์ เพื่อรับข้อมูลนี้ไปที่แอปของคุณ และคลิกที่ api console > เมนู graphql เมื่อเปิดคอนโซล graphql คุณจะเห็น url ที่ด้านบน และที่ด้านล่างคือคีย์แอปพลิเคชันที่จำเป็น เปลี่ยนข้อมูลของคุณในฟังก์ชัน fetch จำไว้ว่าห้ามเปิดเผยกุญแจหลัก 6 4 ส่งออกสภาพแวดล้อม relay runtime ให้ฟังก์ชันที่จำเป็นในการใช้ชั้นเครือข่ายและสร้าง store สุดท้าย มารวมกันเป็นสภาพแวดล้อมใหม่และส่งออกไปยังแอปพลิเคชันของเรา ใช้โค้ดด้านล่างในไฟล์สภาพแวดล้อมของคุณ 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; ไฟล์สภาพแวดล้อมสุดท้ายจะมีลักษณะดังนี้ 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 7	 8 const fetchquery = async (request, variables) => { 9 const body = json stringify({ 10 query request text, 11 variables, 12 }); 13	 14 const headers = { 15 accept 'application/json', 16 'content type' 'application/json', 17 'x parse application id' 'x parse application id', 18 'x parse client key' 'x parse client key', 19 }; 20	 21 try { 22 const response = await fetch(`https //parseapi back4app com/graphql`, { 23 method 'post', 24 headers, 25 body, 26 }); 27 28 const data = await response json(); 29 30 if (data errors) { 31 throw data errors; 32 } 33 34 return data; 35 } catch (err) { 36 console log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41	 42 const environment = new environment({ 43 network network create(fetchquery), 44 store new store(new recordsource()), 45 }); 46	 47 export default environment; บทสรุป ยอดเยี่ยม ตอนนี้เมื่อได้ติดตั้งและกำหนดค่าของ relay และสภาพแวดล้อม relay แล้ว ถึงเวลาที่จะเริ่มใช้ back4app graphql api ดังนั้น ขั้นตอนถัดไปคือการสร้าง query renderer ตัวแรกของเราและสื่อสารกับเซิร์ฟเวอร์ของเรา