Frontend Academy · Pelajaran

SWR dan React Query untuk Penyimpanan Tembolok Data

Gunakan SWR atau TanStack Query untuk mengambil, menyimpan dalam tembolok, menghapus duplikasi, dan memvalidasi ulang data server, menggantikan pola pengambilan manual dengan useEffect.

SWR dan React Query untuk Penyimpanan Tembolok Data adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Status Server Itu Berbeda

Data jaringan bukan sekadar status biasa. Data ini memerlukan penyimpanan cache, deduplikasi, penyegaran di latar belakang, pelacakan pemuatan dan kesalahan, serta percobaan ulang. Pola pengambilan manual dengan useEffect + useState mengimplementasikan ulang semua hal ini dengan buruk.

SWR vs TanStack Query

SWR (Vercel): kecil, sederhana, dan hanya menggunakan hook. TanStack Query (sebelumnya React Query): lebih besar, dengan lebih banyak fitur (mutasi, kueri tanpa batas, prapengambilan, dan alat pengembang). Keduanya sangat baik.

SWR — Penggunaan Dasar

useSWR(key, fetcher) mengembalikan data, kesalahan, dan status pemuatan. Data disimpan dalam cache berdasarkan kunci dan dideduplikasi di seluruh 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 — Perilaku Validasi Ulang

Secara default, SWR melakukan validasi ulang saat fokus (tab mendapatkan fokus kembali) dan saat tersambung kembali. SWR segera mengembalikan nilai yang tersimpan di cache ('usang'), lalu memperbaruinya di latar belakang ('selama validasi ulang').

SWR — Mutasi

mutate(key) memvalidasi ulang kueri yang tersimpan di cache. Berikan data baru sebagai argumen kedua untuk memperbarui secara optimistis.

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 — Penyiapan

Bungkus aplikasi Anda dengan QueryClientProvider yang menggunakan QueryClient yang telah dikonfigurasi.

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 menyimpan data dalam cache.

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 menangani POST/PUT/DELETE dengan status tertunda dan kesalahan bawaan, serta hook onSuccess untuk membatalkan keabsahan 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 Keabsahan Kueri

Setelah mutasi, batalkan keabsahan kueri terkait untuk memicu pengambilan ulang. queryClient.invalidateQueries({ queryKey: ['users'] }) menandainya sebagai usang dan mengambil ulang data jika kueri sedang dipasang.

Pembaruan Optimistis

TanStack Query memiliki dukungan khusus untuk pembaruan optimistis 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] });
  }
});

Kueri Tanpa Batas

useInfiniteQuery menangani daftar berpaginasi atau bergulir tanpa batas—menyediakan fetchNextPage dan melacak semua halaman yang telah dimuat.

Alat Pengembang React Query

Tambahkan @tanstack/react-query-devtools untuk mendapatkan panel mengambang yang menampilkan semua kueri yang tersimpan di cache beserta statusnya, dan memungkinkan Anda membatalkan keabsahannya secara manual.

Pemeriksaan Singkat

Apa manfaat utama menggunakan SWR atau TanStack Query dibandingkan useEffect + fetch secara manual?

Rangkuman: SWR dan React Query

Status server memerlukan penyimpanan cache, deduplikasi, dan validasi ulang. SWR berukuran kecil dan sederhana. TanStack Query memiliki lebih banyak fitur (mutasi, kueri tanpa batas, dan alat pengembang). Gunakan useQuery untuk pembacaan dan useMutation untuk penulisan. Gunakan invalidateQueries setelah mutasi. Lakukan pembaruan optimistis dengan onMutate/onError. Keduanya membuat useEffect+fetch manual tidak lagi diperlukan dalam aplikasi produksi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “SWR dan React Query untuk Penyimpanan Tembolok Data” gratis?

Ya — teks lengkap “SWR dan React Query untuk Penyimpanan Tembolok Data” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “SWR dan React Query untuk Penyimpanan Tembolok Data”?

Gunakan SWR atau TanStack Query untuk mengambil, menyimpan dalam tembolok, menghapus duplikasi, dan memvalidasi ulang data server, menggantikan pola pengambilan manual dengan useEffect. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “SWR dan React Query untuk Penyimpanan Tembolok Data” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Fetch API: GET, POST, PUT, DELETE
Axios: Interceptor dan URL Dasar
Penanganan Error: Kode Status HTTP
SWR dan React Query untuk Penyimpanan Tembolok Data

← Kembali ke Frontend Academy