SWR dan React Query untuk Penyimpanan Data dalam Cache
Gunakan SWR atau TanStack Query untuk mendapatkan, menyimpan dalam cache, menyahgandakan dan mengesahkan semula data pelayan, sambil menggantikan corak mendapatkan data useEffect secara manual.
SWR dan React Query untuk Penyimpanan Data dalam Cache ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Keadaan Pelayan Berbeza
Data rangkaian bukan sekadar keadaan biasa. Data ini memerlukan: penyimpanan cache, deduplikasi, penyegaran latar belakang, penjejakan pemuatan/ralat dan percubaan semula. Corak pengambilan manual menggunakan useEffect + useState melaksanakan semula ciri-ciri ini dengan kurang baik.
SWR berbanding TanStack Query
SWR (Vercel): kecil, mudah dan berasaskan cangkuk sahaja. TanStack Query (dahulunya React Query): lebih besar, dengan lebih banyak ciri (mutasi, tanpa penghujung, prapengambilan, alat pembangun). Kedua-duanya sangat baik.
SWR — Penggunaan Asas
useSWR(key, fetcher) mengembalikan data, ralat dan keadaan pemuatan. Data dicache berdasarkan kunci serta dideduplikasi merentas komponen.
import useSWR from 'swr';
const fetcher = (url) => fetch(url).then(r => r.json());
function Profile() {
const { data, error, isLoading } = useSWR('/api/me', fetcher);
if (error) return <ErrorMessage error={error} />;
if (isLoading) return <Spinner />;
return <h1>{data.name}</h1>;
}SWR — Tingkah Laku Pengesahan Semula
Secara lalai, SWR mengesahkan semula apabila fokus (tab mendapat semula fokus) dan apabila disambungkan semula. SWR mengembalikan nilai cache dengan serta-merta (stale) dan mengemas kini data di latar belakang (while-revalidate).
SWR — Mutasi
mutate(key) mengesahkan semula pertanyaan yang dicache. Hantar data baharu sebagai argumen kedua untuk mengemas kini secara optimistik.
import useSWR, { mutate } from 'swr';
async function updateProfile(updates) {
// Optimistic update — UI reflects change immediately
mutate('/api/me', { ...currentData, ...updates }, false);
await fetch('/api/me', { method: 'PUT', body: JSON.stringify(updates) });
// Revalidate to get the server's canonical state
mutate('/api/me');
}TanStack Query — Persediaan
Bungkus aplikasi anda dalam QueryClientProvider dengan QueryClient yang dikonfigurasikan.
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const client = new QueryClient({
defaultOptions: {
queries: { staleTime: 30000, retry: 2 }
}
});
function App() {
return (
<QueryClientProvider client={client}>
<Routes />
</QueryClientProvider>
);
}useQuery
useQuery({ queryKey, queryFn }) mengambil dan mencache data.
import { useQuery } from '@tanstack/react-query';
function UserList() {
const { data, isLoading, error } = useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then(r => r.json()),
staleTime: 60_000 // fresh for 1 minute
});
if (isLoading) return <Spinner />;
if (error) return <ErrorMessage error={error} />;
return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}useMutation untuk Penulisan
useMutation mengendalikan POST/PUT/DELETE dengan keadaan menunggu/ralat terbina dalam serta cangkuk onSuccess untuk membatalkan cache.
import { useMutation, useQueryClient } from '@tanstack/react-query';
function CreateUserForm() {
const qc = useQueryClient();
const m = useMutation({
mutationFn: (user) => fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] })
});
return <button onClick={() => m.mutate({ name: 'Alice' })} disabled={m.isPending}>Create</button>;
}Pembatalan Pertanyaan
Selepas mutasi, batalkan pertanyaan berkaitan untuk mencetuskan pengambilan semula. queryClient.invalidateQueries({ queryKey: ['users'] }) menandainya sebagai lapuk dan mengambilnya semula jika dipasang.
Kemas Kini Optimistik
TanStack Query menyediakan sokongan kemas kini optimistik terbina dalam melalui onMutate, onError dan onSettled.
useMutation({
mutationFn: updateUser,
onMutate: async (newUser) => {
await qc.cancelQueries({ queryKey: ['user', newUser.id] });
const previous = qc.getQueryData(['user', newUser.id]);
qc.setQueryData(['user', newUser.id], newUser);
return { previous };
},
onError: (_, newUser, ctx) => {
qc.setQueryData(['user', newUser.id], ctx.previous); // rollback
},
onSettled: (_, __, newUser) => {
qc.invalidateQueries({ queryKey: ['user', newUser.id] });
}
});Pertanyaan Tanpa Penghujung
useInfiniteQuery mengendalikan senarai berhalaman/tatal tanpa penghujung — menyediakan fetchNextPage dan menjejaki semua halaman yang telah dimuatkan.
Alat Pembangun React Query
Tambah @tanstack/react-query-devtools untuk mendapatkan panel terapung yang menunjukkan semua pertanyaan yang dicache serta keadaannya, dan membolehkan anda membatalkannya secara manual.
Semakan Ringkas
Apakah manfaat utama menggunakan SWR atau TanStack Query berbanding useEffect + fetch secara manual?
Ringkasan: SWR dan React Query
Keadaan pelayan memerlukan penyimpanan cache, deduplikasi dan pengesahan semula. SWR: kecil dan mudah. TanStack Query: lebih banyak ciri (mutasi, tanpa penghujung, alat pembangun). useQuery untuk bacaan, useMutation untuk penulisan. invalidateQueries selepas mutasi. Kemas kini optimistik dengan onMutate/onError. Kedua-duanya menjadikan useEffect+pengambilan manual tidak lagi diperlukan untuk aplikasi pengeluaran.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “SWR dan React Query untuk Penyimpanan Data dalam Cache” percuma?
Ya — teks penuh “SWR dan React Query untuk Penyimpanan Data dalam Cache” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “SWR dan React Query untuk Penyimpanan Data dalam Cache”?
Gunakan SWR atau TanStack Query untuk mendapatkan, menyimpan dalam cache, menyahgandakan dan mengesahkan semula data pelayan, sambil menggantikan corak mendapatkan data useEffect secara manual. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “SWR dan React Query untuk Penyimpanan Data dalam Cache” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Fetch API: GET POST PUT DELETE
- Axios: Interceptor dan URL Asas
- Pengendalian Ralat: Kod Status HTTP
- SWR dan React Query untuk Penyimpanan Data dalam Cache