การกลายข้อมูลและการอัปเดตเชิงคาดการณ์ด้วย SWR

ฟังก์ชัน mutate ส่วนกลางจาก swr ช่วยให้คุณเรียกการตรวจสอบข้อมูลใหม่สำหรับคีย์แคชใดก็ได้จากทุกที่ในแอปพลิเคชัน mutate('/api/user') จะทำให้ฮุก useSWR('/api/user') ทั้งหมดดึงข้อมูลใหม่

นำเข้าด้วย: import { mutate } from 'swr' วิธีนี้มีประโยชน์สำหรับทำให้ข้อมูลเป็นโมฆะหลังการดำเนินการบนเซิร์ฟเวอร์ที่เกิดขึ้นนอกคอมโพเนนต์ ซึ่งไม่มีสิทธิ์เข้าถึง mutate ที่ผูกไว้โดยตรง

ส่งข้อมูลเป็นอาร์กิวเมนต์ที่สองให้ mutate: mutate('/api/user', updatedUser) จะตั้งค่าแคชเป็น updatedUser ทันทีโดยไม่ส่งคำขอเครือข่าย วิธีนี้บางครั้งเรียกว่าการกลายพันธุ์ภายในเครื่อง

เพิ่ม { revalidate: false } เป็นอาร์กิวเมนต์ที่สามเพื่อป้องกันไม่ให้ SWR ดึงข้อมูลใหม่หลังการอัปเดตเชิงคาดการณ์

useSWRMutation ออกแบบมาสำหรับการกลายพันธุ์ที่ผู้ใช้เริ่มดำเนินการ (การส่งแบบฟอร์มและการคลิกปุ่ม) ซึ่งต่างจากการดึงข้อมูลโดยอัตโนมัติ ฮุกนี้จะไม่ทำงานตอนเมานต์ แต่จะทำงานเฉพาะเมื่อคุณเรียกใช้ trigger()

นำเข้าจาก swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest)

fetcher สำหรับ useSWRMutation จะรับ (key, { arg }) โดย arg คือค่าที่ส่งให้ trigger() ตัวอย่าง: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) })

เรียกใช้ trigger({ title: 'New Post', content: '...' }) เพื่อเริ่มการกลายพันธุ์โดยส่งข้อมูลโพสต์เป็น arg

isMutating จาก useSWRMutation จะมีค่าเป็น true ขณะที่คำขอเปลี่ยนแปลงข้อมูลกำลังดำเนินการอยู่ คุณสามารถใช้ค่านี้เพื่อปิดใช้งานปุ่มส่งและแสดงตัวโหลดระหว่างดำเนินการ เพื่อป้องกันการส่งข้อมูลซ้ำ

วิธีนี้ใช้แทนตัวแปรสถานะ isSubmitting ที่คุณอาจต้องจัดการด้วย useState ด้วยตนเอง

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

รูปแบบนี้ทำให้ส่วนติดต่อผู้ใช้ตอบสนองได้ทันที ปุ่มถูกใจจะแสดงเป็นสถานะถูกกดทันทีโดยไม่ต้องรอการตอบกลับจาก POST

ใช้ mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }) โดย SWR จะตั้งค่าแคชเป็น optimisticValue ทันที ส่งคำขอตรวจสอบข้อมูลใหม่ และย้อนกลับไปใช้ค่าก่อนหน้าหากคำขอนั้นเกิดข้อผิดพลาด

ตัวเลือก rollbackOnError: true จำเป็นอย่างยิ่งต่อความถูกต้อง หากไม่มีตัวเลือกนี้ การเปลี่ยนแปลงข้อมูลที่ล้มเหลวจะทิ้งข้อมูลแบบมองโลกในแง่ดีที่ล้าสมัยไว้ในแคช

เมื่อกำหนด rollbackOnError: true และการเปลี่ยนแปลงข้อมูลถูกปฏิเสธ SWR จะกู้คืนแคชไปเป็นภาพสถานะที่บันทึกไว้ก่อนการอัปเดตแบบมองโลกในแง่ดีโดยอัตโนมัติ คุณไม่จำเป็นต้องเขียนโค้ดย้อนกลับด้วยตนเอง

นอกจากนี้ ให้กำหนด populateCache: false หากเนื้อหาการตอบกลับจากการเปลี่ยนแปลงข้อมูลมีรูปแบบไม่ตรงกับรูปแบบข้อมูลของ useSWR เพื่อป้องกันไม่ให้การตอบกลับอัปเดตแคชอย่างไม่ถูกต้อง

useSWR คืนค่า mutate ที่ผูกกับคีย์ดังนี้: const { data, mutate } = useSWR('/api/user', fetcher) mutate ที่ผูกกับคีย์นี้จะกำหนดเป้าหมายเป็นคีย์ '/api/user' โดยอัตโนมัติ คุณจึงไม่ต้องส่งคีย์ซ้ำ

ใช้ mutate แบบผูกกับคีย์ภายในคอมโพเนนต์ที่รับผิดชอบการแสดงข้อมูล ใช้ mutate ส่วนกลางจาก swr เมื่อต้องการทำให้คีย์ไม่ถูกต้องจากคอมโพเนนต์อื่นที่ไม่เกี่ยวข้องหรือจากฟังก์ชันยูทิลิตี

useMutation ของ React Query มีรูปแบบ trigger/isMutating ที่คล้ายกัน ความแตกต่างสำคัญคือ รูปแบบมาตรฐานของ React Query สำหรับทำให้แคชไม่ถูกต้องคือการใช้การเรียกกลับ onSuccess ร่วมกับ queryClient.invalidateQueries ส่วน SWR ใช้ฟังก์ชัน mutate โดยตรงเพื่ออัปเดตแคช

ทั้งสองระบบรองรับการอัปเดตแบบมองโลกในแง่ดีและการย้อนกลับ แต่รูปแบบ API แตกต่างกัน ทีมที่เชี่ยวชาญระบบใดระบบหนึ่งจะเรียนรู้อีกระบบได้อย่างรวดเร็ว

หลังจากการเปลี่ยนแปลงข้อมูลสำเร็จ คุณมีสามทางเลือก ได้แก่ ดึงข้อมูลใหม่โดยเรียก mutate(key) อัปเดตแคชด้วยเนื้อหาการตอบกลับ (หาก API ส่งทรัพยากรที่อัปเดตแล้วกลับมา) หรือใช้ทั้งสองวิธีร่วมกับการอัปเดตแบบมองโลกในแง่ดีและการตรวจสอบข้อมูลใหม่

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

Global mutate(key) จะเรียกใช้การตรวจสอบข้อมูลใหม่ ส่วน mutate(key, data) จะอัปเดตแคชโดยไม่ดึงข้อมูลใหม่ useSWRMutation จัดการการเปลี่ยนแปลงข้อมูลที่ผู้ใช้เรียกใช้โดยชัดเจนผ่าน trigger() สถานะ isMutating และการรองรับ extraArg การอัปเดตแบบมองโลกในแง่ดีด้วย optimisticData และ rollbackOnError: true ทำให้ส่วนติดต่อผู้ใช้ตอบสนองได้ทันที พร้อมกู้คืนโดยอัตโนมัติเมื่อเกิดข้อผิดพลาด

mutate แบบผูกกับคีย์จาก useSWR จะกำหนดเป้าหมายเป็นคีย์ของตัวเอง ส่วน mutate ส่วนกลางจาก swr สามารถใช้งานได้จากทุกที่