Hook useSWR: Pengambilan, Pemuatan, dan State Kesalahan

useSWR(key, fetcher, options) adalah kait utama. key adalah kunci tembolok (biasanya string URL), fetcher adalah fungsi asinkron yang mengembalikan data, dan options adalah objek konfigurasi opsional.

Kait ini mengembalikan objek dengan data, error, isLoading, isValidating, dan fungsi mutate.

Kunci dapat berupa string URL, array [url, params], atau null. Kunci string dipetakan ke permintaan GET sederhana. Kunci array memungkinkan Anda menyertakan variabel seperti userId atau filters ke dalam identitas tembolok.

Meneruskan null menonaktifkan permintaan sepenuhnya, yang berguna untuk pengambilan kondisional ketika data yang diperlukan belum tersedia.

Pengambil data menerima key (atau kunci array yang diuraikan sebagai argumen) dan harus mengembalikan Promise. Nilai yang diselesaikan menjadi data. Jika fetcher melempar galat, properti error ditetapkan.

Contoh: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

data bernilai undefined saat pertama kali memuat dan sama dengan nilai fetcher yang telah diselesaikan setelah berhasil. error bernilai undefined kecuali fetcher melempar galat; dalam hal itu, error berisi objek galat yang dilemparkan.

Periksa if (error) untuk merender pesan galat, dan if (!data) untuk merender kerangka pemuatan, sehingga menyediakan UI cadangan yang jelas.

isLoading bernilai true hanya ketika tidak ada data dalam tembolok dan permintaan sedang berlangsung: pemuatan pertama untuk kunci ini. isValidating bernilai true setiap kali permintaan sedang berlangsung, termasuk validasi ulang di latar belakang ketika data dalam tembolok sudah ada.

Gunakan isLoading untuk layar kerangka; gunakan isValidating untuk indikator pemuatan halus yang menunjukkan penyegaran di latar belakang.

SWRConfig memungkinkan Anda menentukan fungsi pengambil data bawaan, dedupingInterval, refreshInterval, pengendali onError, dan opsi lainnya untuk semua panggilan useSWR dalam turunannya. Hal ini memusatkan konfigurasi sehingga Anda tidak perlu mengulang opsi dalam setiap kait.

Sarang-susun beberapa penyedia SWRConfig untuk menggunakan bawaan yang berbeda pada bagian aplikasi yang berbeda.

Teruskan null sebagai kunci untuk melewati permintaan: useSWR(isLoggedIn ? '/api/user' : null, fetcher). SWR tidak akan mengambil data hingga kunci menjadi nilai yang bukan null.

Pendekatan ini lebih rapi daripada opsi skip di React Query. Peralihan kunci dari null ke string secara otomatis memicu pengambilan pertama.

Rangkai kait SWR untuk permintaan yang saling bergantung: const { data: user } = useSWR('/api/me', fetcher) lalu const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher). Kait kedua menunggu hingga kait pertama selesai.

Pola ini menghindari rangkaian useEffect dan menjaga dependensi data tetap deklaratif serta mudah dibaca.

Jika komponen Header dan Sidebar sama-sama memanggil useSWR('/api/user', fetcher), SWR hanya mengirim satu permintaan dan membagikan hasilnya. Kedua komponen dirender ulang bersama-sama ketika data atau error diperbarui.

Deduplikasi ini berlangsung secara otomatis dalam jendela dedupingInterval (bawaan 2000 md) tanpa konfigurasi tambahan.

refreshInterval: 5000 melakukan pemeriksaan setiap 5 detik. refreshWhenHidden: false menghentikan pemeriksaan saat tab tidak terlihat. shouldRetryOnError: false menonaktifkan percobaan ulang otomatis. revalidateOnFocus: false menonaktifkan validasi ulang yang dipicu fokus.

Gabungkan opsi agar sesuai dengan kebutuhan kesegaran data Anda: dasbor sering menggunakan refreshInterval, sedangkan konten statis menetapkan revalidateOnFocus: false.

Untuk data yang dibagi menjadi beberapa halaman, sertakan nomor halaman dalam kunci: useSWR(['/api/items', page], fetcher). Mengubah halaman memicu pengambilan baru untuk halaman tersebut sambil menyimpan halaman sebelumnya dalam tembolok.

SWR juga menyediakan useSWRInfinite untuk pola berbasis kursor atau pengguliran tanpa akhir dengan fungsi getKey yang membuat kunci berdasarkan indeks halaman dan data halaman sebelumnya.

Apa yang terjadi ketika Anda meneruskan null sebagai kunci ke useSWR?

useSWR(key, fetcher) mengembalikan data, error, isLoading, dan isValidating. Kunci null menonaktifkan pengambilan untuk permintaan kondisional dan yang saling bergantung. isLoading menunjukkan pemuatan pertama; isValidating menunjukkan permintaan apa pun yang sedang berlangsung. SWRConfig memusatkan bawaan, dan deduplikasi permintaan lintas komponen berlangsung secara otomatis.

Opsi seperti refreshInterval, revalidateOnFocus, dan shouldRetryOnError menyempurnakan perilaku kesegaran data pada setiap kait atau secara global.