Mutasi dan Pembaruan Optimistis dengan SWR

Fungsi mutate global dari swr memungkinkan Anda memicu validasi ulang untuk kunci tembolok apa pun dari mana saja dalam aplikasi Anda: mutate('/api/user') menyebabkan semua kait useSWR('/api/user') mengambil ulang data.

Impor fungsi ini dengan: import { mutate } from 'swr'. Ini berguna untuk membatalkan validitas data setelah tindakan server di luar komponen yang memiliki akses langsung ke mutate terikat.

Teruskan data sebagai argumen kedua ke mutate: mutate('/api/user', updatedUser) segera menetapkan tembolok ke updatedUser tanpa membuat permintaan jaringan. Ini terkadang disebut mutasi lokal.

Tambahkan { revalidate: false } sebagai argumen ketiga untuk mencegah SWR mengambil ulang setelah pembaruan optimistis.

useSWRMutation dirancang untuk mutasi yang diprakarsai pengguna (pengiriman formulir, klik tombol), bukan pengambilan otomatis. Kait ini tidak berjalan saat pemasangan; kait ini hanya berjalan ketika Anda memanggil trigger().

Impor dari swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

Pengambil data untuk useSWRMutation menerima (key, { arg }), dengan arg sebagai nilai yang diteruskan ke trigger(). Contoh: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Panggil trigger({ title: 'New Post', content: '...' }) untuk menjalankan mutasi dengan data postingan sebagai argumen.

isMutating dari useSWRMutation bernilai true selama permintaan mutasi sedang diproses. Gunakan ini untuk menonaktifkan tombol pengiriman dan menampilkan indikator pemuatan selama permintaan berlangsung, sehingga mencegah pengiriman ganda.

Ini menggantikan variabel status isSubmitting manual yang harus Anda kelola dengan useState.

Pembaruan optimistis langsung menerapkan hasil yang diharapkan ke antarmuka sebelum server mengonfirmasi perubahan. Jika server berhasil, tidak ada tindakan lain yang diperlukan. Jika gagal, pembaruan dikembalikan ke status sebelumnya.

Pola ini membuat antarmuka terasa seketika: tombol suka tampak langsung diklik tanpa menunggu respons POST.

Gunakan mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). SWR langsung menetapkan cache ke optimisticValue, mengirim permintaan validasi ulang, dan mengembalikannya ke nilai sebelumnya jika permintaan menimbulkan galat.

Opsi rollbackOnError: true sangat penting untuk memastikan kebenaran: tanpanya, mutasi yang gagal akan meninggalkan data optimistis yang kedaluwarsa di cache.

Saat rollbackOnError: true ditetapkan dan mutasi ditolak, SWR otomatis memulihkan cache ke cuplikan yang diambil sebelum pembaruan optimistis. Anda tidak perlu menulis kode pengembalian secara manual.

Selain itu, tetapkan populateCache: false jika isi respons mutasi tidak sesuai dengan bentuk data useSWR, agar respons tidak memperbarui cache secara keliru.

useSWR mengembalikan mutate terikat: const { data, mutate } = useSWR('/api/user', fetcher). mutate terikat ini otomatis menargetkan kunci '/api/user'; Anda tidak perlu memberikan kunci tersebut lagi.

Gunakan mutate terikat di dalam komponen yang memiliki tampilan data. Gunakan mutate global dari swr jika Anda perlu membatalkan validasi suatu kunci dari komponen atau fungsi utilitas yang tidak berkaitan.

useMutation milik React Query memiliki pola trigger/isMutating yang serupa. Perbedaan utamanya: callback onSuccess milik React Query bersama queryClient.invalidateQueries merupakan pola idiomatis untuk membatalkan validasi cache. SWR menggunakan fungsi mutate secara langsung untuk memperbarui cache.

Keduanya mendukung pembaruan optimistis dan pengembalian, tetapi bentuk API-nya berbeda. Tim yang mahir menggunakan salah satunya dapat mempelajari yang lain dengan cepat.

Setelah mutasi berhasil, Anda memiliki tiga pilihan: mengambil ulang data dengan memanggil mutate(key), memperbarui cache menggunakan isi respons (jika API mengembalikan sumber daya yang telah diperbarui), atau menggabungkan keduanya melalui pembaruan optimistis dan validasi ulang.

Untuk mutasi daftar (menambahkan item), perbarui cache secara manual untuk menambahkan item baru, lalu lakukan validasi ulang guna mengonfirmasi status server. Cara ini menghindari pengambilan ulang seluruh daftar sekaligus menjaga konsistensi data.

Opsi apa yang harus Anda tetapkan di mutate milik SWR agar pembaruan optimistis dikembalikan secara otomatis saat terjadi galat?

mutate(key) global memicu validasi ulang; mutate(key, data) memperbarui cache tanpa mengambil ulang data. useSWRMutation menangani mutasi eksplisit yang dipicu pengguna dengan trigger(), status isMutating, dan dukungan extraArg. Pembaruan optimistis dengan optimisticData dan rollbackOnError: true membuat antarmuka terasa seketika, dengan pemulihan otomatis dari galat.

mutate terikat dari useSWR menargetkan kuncinya sendiri; mutate global dari swr dapat digunakan di mana saja.