ฮุก useSWR: การดึงข้อมูล การโหลด และสถานะข้อผิดพลาด

useSWR(key, fetcher, options) คือฮุกหลัก โดย key คือคีย์แคช (โดยทั่วไปเป็นสตริง URL) fetcher คือฟังก์ชัน async ที่ส่งคืนข้อมูล และ options คือออบเจ็กต์การตั้งค่าที่ไม่บังคับ

ฮุกนี้จะส่งคืนออบเจ็กต์ที่มี data, error, isLoading, isValidating และฟังก์ชัน mutate

key อาจเป็น URL แบบสตริง อาร์เรย์ของ [url, params] หรือ null คีย์แบบสตริงจะจับคู่กับคำขอ GET แบบง่าย คีย์แบบอาร์เรย์ช่วยให้คุณฝังตัวแปรอย่าง userId หรือ filters ไว้ในข้อมูลระบุเอกลักษณ์ของแคชได้

การส่งค่า null จะปิดใช้งานคำขอทั้งหมด เหมาะสำหรับการดึงข้อมูลแบบมีเงื่อนไขเมื่อข้อมูลที่จำเป็นยังไม่พร้อมใช้งาน

fetcher จะรับคีย์ (หรือรับคีย์แบบอาร์เรย์ที่กระจายเป็นอาร์กิวเมนต์) และต้องส่งคืน Promise ค่าที่ได้รับเมื่อ Promise สำเร็จจะกลายเป็น data หาก fetcher โยนข้อผิดพลาด พร็อพเพอร์ตี error จะถูกกำหนดค่า

ตัวอย่าง: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

data จะเป็น undefined ขณะกำลังโหลดครั้งแรก และจะเท่ากับค่าที่ fetcher ส่งคืนเมื่อทำงานสำเร็จ ส่วน error จะเป็น undefined เว้นแต่ fetcher จะโยนข้อผิดพลาด ซึ่งในกรณีนั้นจะเก็บออบเจ็กต์ข้อผิดพลาดที่ถูกโยนไว้

ตรวจสอบ if (error) เพื่อแสดงข้อความข้อผิดพลาด และตรวจสอบ if (!data) เพื่อแสดงโครงร่างขณะโหลด พร้อมจัดเตรียมส่วนติดต่อผู้ใช้สำรองที่ชัดเจน

isLoading จะเป็น true เฉพาะเมื่อไม่มีข้อมูลแคชและมีคำขอที่กำลังดำเนินการอยู่ ซึ่งก็คือการโหลดครั้งแรกของคีย์นี้ isValidating จะเป็น true ทุกครั้งที่มีคำขอกำลังดำเนินการอยู่ รวมถึงการตรวจสอบข้อมูลใหม่เบื้องหลังเมื่อมีข้อมูลแคชอยู่แล้ว

ใช้ isLoading สำหรับหน้าจอโครงร่างขณะโหลด และใช้ isValidating สำหรับวงแหวนขนาดเล็กที่แสดงว่ากำลังรีเฟรชเบื้องหลัง

SWRConfig ช่วยให้คุณกำหนดฟังก์ชันดึงข้อมูลเริ่มต้น dedupingInterval, refreshInterval, ตัวจัดการ onError และตัวเลือกอื่น ๆ สำหรับการเรียกใช้ useSWR ทั้งหมดภายในต้นไม้ย่อยของมัน วิธีนี้รวมการตั้งค่าไว้ที่ศูนย์กลาง แทนการเขียนตัวเลือกซ้ำในฮุกแต่ละแห่ง

คุณสามารถวางผู้ให้บริการ SWRConfig หลายตัวซ้อนกัน เพื่อให้ส่วนต่าง ๆ ของแอปมีค่าเริ่มต้นแตกต่างกัน

ส่ง null เป็นคีย์เพื่อข้ามคำขอ: useSWR(isLoggedIn ? '/api/user' : null, fetcher) SWR จะไม่ดึงข้อมูลจนกว่าคีย์จะเปลี่ยนเป็นค่าที่ไม่ใช่ null

วิธีนี้สะอาดกว่าการใช้ตัวเลือก skip ใน React Query เมื่อคีย์เปลี่ยนจาก null เป็นสตริง ระบบจะเริ่มดึงข้อมูลครั้งแรกโดยอัตโนมัติ

เชื่อมโยงฮุก SWR สำหรับคำขอที่ขึ้นต่อกัน: const { data: user } = useSWR('/api/me', fetcher) จากนั้น const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher) ฮุกที่สองจะรอจนกว่าฮุกแรกจะทำงานเสร็จ

รูปแบบนี้ช่วยหลีกเลี่ยงสาย useEffect และทำให้การพึ่งพาข้อมูลมีลักษณะประกาศชัดเจนและอ่านง่าย

หากคอมโพเนนต์ Header และคอมโพเนนต์ Sidebar ต่างก็เรียกใช้ useSWR('/api/user', fetcher) SWR จะส่งคำขอเพียงครั้งเดียวและแบ่งปันผลลัพธ์ให้ ทั้งสองคอมโพเนนต์จะเรนเดอร์ใหม่พร้อมกันเมื่อข้อมูลหรือ error อัปเดต

การขจัดคำขอซ้ำนี้เกิดขึ้นโดยอัตโนมัติภายในช่วงเวลา dedupingInterval (ค่าเริ่มต้น 2000ms) โดยไม่ต้องมีการตั้งค่าเพิ่มเติม

refreshInterval: 5000 จะดึงข้อมูลเป็นระยะทุก 5 วินาที refreshWhenHidden: false จะหยุดการดึงข้อมูลเป็นระยะเมื่อแท็บไม่แสดงอยู่ shouldRetryOnError: false จะปิดการลองใหม่โดยอัตโนมัติ revalidateOnFocus: false จะปิดการตรวจสอบข้อมูลใหม่เมื่อกลับมาโฟกัส

ผสมผสานตัวเลือกต่าง ๆ ให้ตรงกับข้อกำหนดด้านความใหม่ของข้อมูล สำหรับแดชบอร์ดมักใช้ refreshInterval ส่วนเนื้อหาคงที่มักกำหนด revalidateOnFocus: false

สำหรับข้อมูลที่แบ่งหน้า ให้รวมหมายเลขหน้าไว้ในคีย์: useSWR(['/api/items', page], fetcher) เมื่อเปลี่ยนหน้า ระบบจะดึงข้อมูลของหน้านั้นใหม่พร้อมแคชหน้าก่อนหน้าไว้

SWR ยังมี useSWRInfinite สำหรับรูปแบบที่ใช้เคอร์เซอร์หรือการเลื่อนแบบไม่สิ้นสุด โดยมีฟังก์ชัน getKey ที่สร้างคีย์ตามดัชนีหน้าและข้อมูลของหน้าก่อนหน้า

จะเกิดอะไรขึ้นเมื่อส่ง null เป็นคีย์ให้ useSWR

useSWR(key, fetcher) จะส่งคืน data, error, isLoading และ isValidating คีย์ที่เป็น null จะปิดใช้งานการดึงข้อมูลสำหรับคำขอแบบมีเงื่อนไขและคำขอที่ขึ้นต่อกัน isLoading แสดงว่ากำลังโหลดครั้งแรก ส่วน isValidating แสดงว่ามีคำขอใด ๆ กำลังดำเนินการอยู่ SWRConfig รวมค่าเริ่มต้นไว้ที่ศูนย์กลาง และการขจัดคำขอซ้ำระหว่างคอมโพเนนต์จะเกิดขึ้นโดยอัตโนมัติ

ตัวเลือกอย่าง refreshInterval, revalidateOnFocus และ shouldRetryOnError ช่วยปรับพฤติกรรมความใหม่ของข้อมูลสำหรับฮุกแต่ละแห่งหรือทั้งระบบได้อย่างละเอียด