Mengelola Server State dengan TanStack Query: Tutorial Lengkap untuk Pemula

Apa Itu Server State dan Mengapa Perlu Dikelola dengan Baik?

Dalam pengembangan aplikasi React modern, data yang berasal dari server atau API disebut sebagai server state. Berbeda dengan client state yang bersifat lokal seperti input form atau toggle UI, server state memerlukan sinkronisasi terus-menerus antara klien dan server.

Mengelola server state secara manual menggunakan useState dan useEffect seringkali menimbulkan berbagai masalah. Data bisa tampil ganda, loading state menjadi tidak konsisten, dan caching tidak berjalan efisien. Belum lagi tantangan seperti refetching data saat pengguna kembali ke halaman, atau menangani error dari request API.

TanStack Query (sebelumnya dikenal sebagai React Query) hadir sebagai solusi khusus untuk mengelola server state. Library ini menyediakan fitur fetching, caching, sinkronisasi, dan update data secara otomatis. Dengan TanStack Query, Anda tidak perlu lagi menulis boilerplate code untuk menangani berbagai status permintaan data.

Instalasi dan Konfigurasi Awal TanStack Query

Memulai TanStack Query di proyek React sangat mudah. Langkah pertama adalah menginstal library melalui npm atau yarn:

npm install @tanstack/react-query

Setelah instalasi selesai, Anda perlu membungkus komponen root aplikasi dengan QueryClientProvider. Buat instance QueryClient dan berikan sebagai prop:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  );
}

Konfigurasi default QueryClient sudah cukup untuk memulai. Namun, Anda bisa menyesuaikan pengaturan seperti staleTime atau retry sesuai kebutuhan aplikasi. Pastikan untuk mengimpor QueryClient dan QueryClientProvider dari @tanstack/react-query.

Melakukan Fetching Data dengan useQuery

Hook useQuery adalah jantung dari TanStack Query untuk mengambil data. Hook ini menerima dua argumen utama: query key yang unik dan query function yang mengembalikan Promise data.

import { useQuery } from '@tanstack/react-query';

function TodoList() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos
  });

  if (isLoading) return <div>Memuat data...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

Query key berfungsi sebagai identitas unik untuk data di cache. TanStack Query menggunakannya untuk menyimpan, mengambil, dan meng-invalidate data. Pastikan query key konsisten agar data yang benar selalu di-refetch saat terjadi perubahan.

Hook useQuery mengembalikan objek dengan properti seperti data, isLoading, isError, error, dan isSuccess. Anda bisa menggunakan properti ini untuk menampilkan berbagai status UI tanpa perlu menulis logika manual.

Memahami Caching, Stale Time, dan Refetching

Salah satu keunggulan TanStack Query adalah sistem caching yang cerdas. Data yang di-fetch akan disimpan di cache sehingga tidak perlu di-fetch ulang setiap kali komponen di-render.

Stale time menentukan berapa lama data dianggap "fresh" sebelum di-refetch. Secara default, stale time adalah 0, yang berarti data akan dianggap basi segera setelah di-fetch. Anda bisa mengatur stale time sesuai kebutuhan:

const { data } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
  staleTime: 5 * 60 * 1000 // 5 menit
});

Cache time menentukan berapa lama data yang tidak digunakan disimpan di cache sebelum dihapus. Defaultnya adalah 5 menit.

Refetching otomatis terjadi dalam beberapa situasi:

• Saat jendela browser di-fokuskan kembali
• Saat koneksi internet pulih
• Berdasarkan interval waktu tertentu

Konfigurasi staleTime dan cacheTime dapat disesuaikan per query atau secara global di QueryClient.

Melakukan Mutasi Data dengan useMutation

Untuk operasi yang mengubah data di server seperti POST, PUT, atau DELETE, gunakan hook useMutation. Hook ini mengembalikan objek dengan properti mutate, isLoading, isError, dan isSuccess.

import { useMutation, useQueryClient } from '@tanstack/react-query';

function AddTodo() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    }
  });

  return (
    <button onClick={() => mutation.mutate(newTodo)}>
      Tambah Todo
    </button>
  );
}

Setelah mutasi berhasil, Anda bisa meng-invalidate query terkait agar data di-refetch secara otomatis menggunakan queryClient.invalidateQueries(). Ini memastikan UI selalu menampilkan data terbaru.

useMutation juga mendukung optimistic updates untuk memberikan pengalaman pengguna yang lebih responsif. Dengan fitur ini, UI diperbarui segera sebelum konfirmasi dari server.

Optimasi Lanjutan: Pagination, Infinite Query, dan Prefetching

TanStack Query menyediakan fitur-fitur lanjutan untuk menangani data dalam jumlah besar dan meningkatkan performa aplikasi.

Pagination dapat diimplementasikan dengan mengubah query key berdasarkan halaman aktif:

const { data } = useQuery({
  queryKey: ['todos', page],
  queryFn: () => fetchTodos(page)
});

useInfiniteQuery dirancang khusus untuk infinite scrolling atau load-more pagination. Hook ini menyediakan fungsi fetchNextPage dan properti hasNextPage untuk memuat data berikutnya.

Prefetching data dengan queryClient.prefetchQuery() memungkinkan data dimuat sebelum pengguna benar-benar membutuhkannya. Ini sangat berguna untuk halaman yang sering diakses atau navigasi yang diprediksi.

const prefetchTodos = () => {
  queryClient.prefetchQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos
  });
};

Fitur-fitur ini membantu mengurangi waktu loading dan memberikan pengalaman pengguna yang lebih mulus.

Kesimpulan dan Praktik Terbaik

TanStack Query menyederhanakan manajemen server state dan mengurangi boilerplate code secara signifikan. Berikut beberapa praktik terbaik yang perlu diperhatikan:

• Gunakan query key yang deskriptif dan konsisten untuk memudahkan debugging dan invalidasi.
• Atur stale time sesuai dengan frekuensi perubahan data di server. Data yang jarang berubah bisa memiliki stale time yang lebih panjang.
• Manfaatkan onSuccess dan onError di useMutation untuk menangani efek samping setelah mutasi, seperti menampilkan notifikasi atau navigasi.
• Jangan ragu menggunakan fitur-fitur lanjutan seperti infinite query dan prefetching untuk aplikasi yang lebih kompleks.

Dengan mengikuti panduan ini, Anda bisa membangun aplikasi React yang lebih efisien, responsif, dan mudah dipelihara.

Sudah siap mencoba TanStack Query di proyek React Anda? Mulailah dengan menginstal library dan ikuti tutorial di atas. Bagikan pengalaman Anda atau tanyakan hal yang belum jelas di kolom komentar di bawah!