การตั้งค่า Apollo Client ใน React

ติดตั้ง @apollo/client และ graphql โดยแพ็กเกจ graphql เป็นการพึ่งพาร่วมที่ Apollo Client ต้องใช้สำหรับแยกวิเคราะห์เอกสารคิวรีด้วยแท็กแม่แบบ gql

สำหรับโครงการ TypeScript แพ็กเกจทั้งสองมีคำจำกัดความประเภทข้อมูลมาให้ในตัว จึงไม่จำเป็นต้องใช้แพ็กเกจ @types

สร้างอินสแตนซ์ ApolloClient โดยกำหนดแคชและลิงก์ การตั้งค่าที่ง่ายที่สุดคือ new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }) การเขียน uri แบบย่อจะสร้าง HttpLink ภายในให้โดยอัตโนมัติ

หากต้องการควบคุมมากขึ้น ให้สร้างสายลิงก์ด้วยตนเองและส่งให้ตัวเลือก link แทน uri

ห่อแอปพลิเคชัน React ของคุณด้วย ApolloProvider โดยใช้พร็อป client: ApolloProvider client={client} วิธีนี้ทำให้อินสแตนซ์ Apollo Client พร้อมใช้งานสำหรับคอมโพเนนต์ลูกหลานทั้งหมดผ่านบริบทของ React

การเรียกใช้ useQuery และ useMutation ทุกครั้งในต้นไม้คอมโพเนนต์จะใช้ไคลเอ็นต์นี้โดยอัตโนมัติ โดยไม่ต้องส่งพร็อปผ่านทุกชั้น

InMemoryCache เป็นแคชเริ่มต้นของ Apollo Client โดยจะจัดข้อมูลที่ดึงมาให้อยู่ในรูปแบบมาตรฐานตามประเภทและ ID และจัดเก็บแต่ละเอนทิตีไว้ภายใต้คีย์แคชที่ไม่ซ้ำกัน (เช่น User:1) เมื่อคิวรีใดดึง User:1 การอ่านเอนทิตีนั้นในครั้งต่อ ๆ ไปทั้งหมดจะได้รับข้อมูลที่อัปเดตแล้ว

การจัดข้อมูลให้เป็นมาตรฐานนี้หมายความว่า เมื่อมิวเทชันหนึ่งอัปเดตผู้ใช้ ผลลัพธ์ของทุกคิวรีที่มีผู้ใช้คนนั้นจะอัปเดตโดยอัตโนมัติ โดยไม่ต้องเขียนโค้ดเพิ่มเติม

HttpLink จัดการการส่งข้อมูลผ่าน HTTP จาก Apollo Client ไปยังเซิร์ฟเวอร์ GraphQL ของคุณ คุณสามารถกำหนดค่า uri และกำหนด fetch, headers และ credentials เพิ่มเติมได้ตามต้องการ

สำหรับกรณีใช้งานขั้นสูง ลิงก์แบบแบ่งจะส่งการดำเนินการแต่ละประเภทไปยังจุดปลายทางที่แตกต่างกัน โดยซับสคริปชันส่งผ่าน WebSocket (WebSocketLink) ส่วนคิวรีและมิวเทชันส่งผ่าน HTTP (HttpLink)

นำเข้า setContext จาก @apollo/client/link/context สร้างลิงก์ยืนยันตัวตน: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })) จากนั้นเชื่อมต่อไว้ก่อน HttpLink: authLink.concat(httpLink)

ลิงก์ setContext จะทำงานก่อนคำขอแต่ละรายการ โดยเพิ่มส่วนหัวการยืนยันตัวตนให้กับการดำเนินการทุกครั้งแบบไดนามิก

ประกอบลิงก์โดยใช้ ApolloLink.from([authLink, errorLink, httpLink]) หรือ authLink.concat(httpLink) ลิงก์ทำหน้าที่เป็นมิดเดิลแวร์ โดยแต่ละลิงก์จะประมวลผลการดำเนินการและส่งต่อไปยัง next() ลิงก์สุดท้ายในสายจะส่งคำขอ HTTP จริง

สายลิงก์ที่พบบ่อย ได้แก่ ลิงก์ยืนยันตัวตน (เพิ่มส่วนหัว) + ลิงก์ข้อผิดพลาด (จัดการข้อผิดพลาด) + ลิงก์ HTTP (ส่งคำขอ)

นำเข้า onError จาก @apollo/client/link/error ลิงก์ข้อผิดพลาดจะสกัดกั้นข้อผิดพลาด GraphQL และข้อผิดพลาดเครือข่ายทั่วทั้งระบบ ใช้ลิงก์นี้เพื่อเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบเมื่อเกิดข้อผิดพลาด UNAUTHENTICATED หรือแสดงการแจ้งเตือนข้อผิดพลาดทั่วระบบเมื่อเครือข่ายขัดข้อง

ต้องวางลิงก์ข้อผิดพลาดไว้ก่อนลิงก์ HTTP ในสาย แต่สามารถเรียก forward(operation) เพื่อส่งคำขออีกครั้งได้

cache-first (ค่าเริ่มต้น): ส่งคืนข้อมูลจากแคชทันที และดึงข้อมูลใหม่เบื้องหลังหากข้อมูลเก่า network-only: ดึงข้อมูลจากเซิร์ฟเวอร์เสมอและอัปเดตแคช cache-and-network: ส่งคืนข้อมูลจากแคชทันทีและดึงข้อมูลใหม่ จากนั้นอัปเดตส่วนติดต่อผู้ใช้เมื่อได้รับการตอบกลับ cache-only: อ่านจากแคชเท่านั้น และแสดงข้อผิดพลาดหากไม่มีข้อมูลในแคช no-cache: ดึงข้อมูลใหม่เสมอและไม่เขียนลงแคช

ให้เลือกตามข้อกำหนดด้านความใหม่ของข้อมูล โดยแดชบอร์ดมักใช้ cache-and-network ส่วนแบบฟอร์มโปรไฟล์ผู้ใช้มักใช้ network-only

กำหนด fetchPolicy เริ่มต้นใน defaultOptions ของ InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }) การเรียกใช้ useQuery แต่ละรายการสามารถแทนที่ค่านี้สำหรับคิวรีนั้นได้

การตั้งค่าเริ่มต้นทั่วทั้งระบบที่เหมาะสมช่วยลดโค้ดซ้ำจากการต้องระบุ fetchPolicy ในการเรียกใช้ฮุกทุกครั้ง

ส่วนขยายเบราว์เซอร์ Apollo Client DevTools จะเพิ่มแผง Apollo ลงใน Chrome DevTools โดยแสดงคิวรีที่แคชไว้ทั้งหมดพร้อมข้อมูลปัจจุบัน เปิดให้สำรวจแคชแบบจัดข้อมูลให้เป็นมาตรฐาน และเรียกใช้คิวรีซ้ำจากแผง DevTools ได้

ติดตั้งจาก Chrome Web Store และเริ่มต้นไคลเอ็นต์ด้วย devtools: { enabled: true } (เป็นค่าเริ่มต้นในโหมดพัฒนา)

ในสายลิงก์ของ Apollo Client ควรวาง errorLink ไว้ตรงไหนเมื่อเทียบกับ httpLink

ติดตั้ง @apollo/client และ graphql สร้าง ApolloClient พร้อม InMemoryCache และสายลิงก์ แล้วห่อแอปด้วย ApolloProvider สายลิงก์ประกอบด้วย authLink (เพิ่มโทเค็น), errorLink (จัดการข้อผิดพลาดทั่วทั้งระบบ) และ httpLink (การส่งข้อมูลผ่าน HTTP) นโยบายการดึงข้อมูลจะควบคุมลำดับความสำคัญระหว่างแคชกับเครือข่าย ส่วน InMemoryCache จะจัดเอนทิตีให้อยู่ในรูปแบบมาตรฐานตามประเภทและ ID

ส่วนขยายเบราว์เซอร์ Apollo DevTools ช่วยให้ตรวจสอบแคชและแก้ไขข้อบกพร่องได้อย่างสะดวก