รูปแบบเชิงคาดการณ์ด้วย React Query และ Zustand

ฮุก useMutation ของ React Query มีโครงสร้างในตัวสำหรับการอัปเดตเชิงคาดการณ์ผ่านฟังก์ชันเรียกกลับตามวงจรการทำงานสามรายการ ได้แก่ onMutate (ทำงานก่อนการเปลี่ยนแปลงข้อมูลและส่งคืนออบเจ็กต์บริบท) onError (ทำงานเมื่อไม่สำเร็จและรับบริบทนั้น) และ onSettled (ทำงานเมื่อสำเร็จหรือไม่สำเร็จ) โครงสร้างนี้ออกแบบมาโดยเฉพาะสำหรับรูปแบบเชิงคาดการณ์

ใน onMutate ให้ดำเนินการสามขั้นตอน ขั้นแรก ยกเลิกคำขอข้อมูลที่กำลังดำเนินการสำหรับข้อมูลที่ได้รับผลกระทบ (await queryClient.cancelQueries({ queryKey })) จากนั้นเก็บสำเนาแคชปัจจุบัน (queryClient.getQueryData(queryKey)) และสุดท้ายใช้การอัปเดตเชิงคาดการณ์กับแคช (queryClient.setQueryData(queryKey, updater)) ส่งคืนสำเนานั้นเป็นบริบท

ฟังก์ชันเรียกกลับ onError จะได้รับข้อผิดพลาด ตัวแปรของการเปลี่ยนแปลงข้อมูล และบริบทที่ส่งคืนจาก onMutate ใช้บริบทเพื่อย้อนกลับ: queryClient.setQueryData(queryKey, context.previousData) บริบทนี้เป็นตัวเชื่อมระหว่างสำเนาที่เก็บไว้ใน onMutate กับการย้อนกลับใน onError

ฟังก์ชันเรียกกลับ onSettled ทำงานไม่ว่าจะสำเร็จหรือไม่สำเร็จ ใช้ฟังก์ชันนี้เพื่อดึงคำขอข้อมูลใหม่และทำให้สอดคล้องกับสถานะของเซิร์ฟเวอร์: queryClient.invalidateQueries({ queryKey }) วิธีนี้รับประกันว่าหลังการเปลี่ยนแปลงข้อมูลทุกครั้ง ไม่ว่าจะสำเร็จ (เซิร์ฟเวอร์อาจปรับข้อมูล) หรือไม่สำเร็จ (การย้อนกลับเสร็จสมบูรณ์) ในที่สุดสถานะของคุณจะสอดคล้องกับข้อมูลจริงจากเซิร์ฟเวอร์

ตัวอย่างการใช้งานจริงคือการสลับสถานะเสร็จสิ้นของรายการสิ่งที่ต้องทำ ใน onMutate ให้เก็บสำเนารายการสิ่งที่ต้องทำ แล้วอัปเดตรายการที่ระบุในแคช ใน onError ให้กู้คืนสำเนาจากบริบท ใน onSettled ให้ทำให้คำขอข้อมูลรายการสิ่งที่ต้องทำหมดอายุเพื่อดึงข้อมูลใหม่ ผู้ใช้จะเห็นการสลับสถานะทันที ส่วนเซิร์ฟเวอร์จะซิงค์ข้อมูลอยู่เบื้องหลัง

ในคลังสถานะ Zustand การอัปเดตเชิงคาดการณ์ทำได้ตรงไปตรงมา โดยสร้างการกระทำ updateItem(id, changes) ที่อัปเดตรายการในคลังสถานะทันที แล้วจึงเรียก API หาก API ไม่สำเร็จ ให้เรียกการกระทำอีกอย่างคือ revertItem(id, previousState) การอัปเดตสถานะแบบเกิดขึ้นทันทีของ Zustand ทำให้ขั้นตอนเชิงคาดการณ์แสดงผลได้ทันที

เมื่ออัปเดตสถานะ Zustand ที่ซ้อนกันหลายระดับแบบเชิงคาดการณ์ ให้ใช้ produce ของ Immer เพื่อเขียนการเปลี่ยนแปลงอย่างเป็นระเบียบ: set(produce(state => { state.items[id] = { ...state.items[id], ...changes } })) Immer จัดการการอัปเดตแบบไม่เปลี่ยนแปลงค่าเดิมโดยใช้ไวยากรณ์ที่แก้ไขค่าได้ ทำให้การเปลี่ยนแปลงสถานะที่ซ้อนกันซับซ้อนอ่านง่ายและปลอดภัย

React 19 เพิ่ม useOptimistic(state, updateFn) ซึ่งเป็นฮุกในตัวสำหรับการอัปเดตเชิงคาดการณ์ภายในการทำงานฝั่งเซิร์ฟเวอร์ const [optimisticState, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]) การเรียก addOptimistic(newItem) จะอัปเดตส่วนติดต่อผู้ใช้ทันที ขณะที่การทำงานฝั่งเซิร์ฟเวอร์ดำเนินการแบบไม่พร้อมกัน

useOptimistic จัดการการย้อนกลับโดยอัตโนมัติ เมื่อการทำงานฝั่งเซิร์ฟเวอร์เสร็จสิ้น ไม่ว่าจะสำเร็จหรือเกิดข้อผิดพลาด React จะคืนสถานะเชิงคาดการณ์และใช้สถานะจริงจากเซิร์ฟเวอร์ คุณไม่จำเป็นต้องเขียนตรรกะการย้อนกลับด้วยตนเอง เพราะ React จัดการวงจรการทำงานของการอัปเดตเชิงคาดการณ์ระหว่างขอบเขต Suspense ของการทำงานนั้น

การอัปเดตเชิงคาดการณ์แบบทำด้วยตนเองให้การควบคุมเต็มที่ แต่ต้องเขียนโค้ดประกอบจำนวนมาก React Query ใช้ onMutate/onError/onSettled ร่วมกับแคชคำขอข้อมูลเพื่อซิงค์โดยอัตโนมัติ useOptimistic เป็นวิธีที่ง่ายที่สุดสำหรับการทำงานฝั่งเซิร์ฟเวอร์ แต่ต้องใช้ React 19 และสถาปัตยกรรมการทำงานฝั่งเซิร์ฟเวอร์ ให้เลือกตามชั้นข้อมูลของคุณ: แบบทำด้วยตนเองสำหรับสถานะในเครื่องที่เรียบง่าย React Query สำหรับ REST API และ useOptimistic สำหรับ RSC/การทำงานฝั่งเซิร์ฟเวอร์

พิจารณาสถาปัตยกรรมของคุณเมื่อเลือกรูปแบบเชิงคาดการณ์ หากคุณใช้ React Query ทั่วทั้งแอป รูปแบบ onMutate จะสอดคล้องกันและคำนึงถึงแคช หากใช้ Zustand สำหรับสถานะส่วนกลาง รูปแบบที่อาศัยการกระทำจะเข้ากันได้อย่างเป็นธรรมชาติ หากใช้ React 19 ร่วมกับการทำงานฝั่งเซิร์ฟเวอร์ useOptimistic คือตัวเลือกที่เหมาะสมตามแนวทางของ React การผสมรูปแบบต่าง ๆ ภายในแอปเดียวเป็นเรื่องปกติและยอมรับได้

ฟังก์ชันเรียกกลับ onMutate ในรีแอ็กต์ คิวรีควรส่งค่าใดกลับมาเพื่อเปิดใช้งานการย้อนกลับใน onError?

React Query useMutation ใช้ onMutate (ยกเลิกคำขอข้อมูล เก็บสำเนา ใช้การอัปเดตเชิงคาดการณ์ และส่งคืนบริบท) onError (กู้คืนสำเนาจากบริบท) และ onSettled (ทำให้ข้อมูลหมดอายุเพื่อดึงข้อมูลใหม่) การอัปเดตเชิงคาดการณ์ของ Zustand จะเรียกการกระทำเปลี่ยนสถานะทันทีแล้วจึงเรียก API และย้อนกลับเมื่อไม่สำเร็จ React 19 useOptimistic มีการย้อนกลับอัตโนมัติภายในการทำงานฝั่งเซิร์ฟเวอร์ เลือกรูปแบบที่เหมาะกับสถาปัตยกรรมชั้นข้อมูลของคุณ