Belajar TanStack Query - Sejarah, Latar Belakang & Mengapa Membutuhkannya

#Pendahuluan

Semua library besar lahir dari rasa sakit. TanStack Query tidak terkecuali: dia lahir karena generasi developer React harus menulis ulang kode yang sama — fetch, loading, error, lalu render ulang — di setiap komponen. Sebelum memahami cara pakainya, penting untuk tahu mengapa library ini ada dan masalah apa yang dia selesaikan.

Episode 1 menelusuri evolusi data fetching di React, dari pola manual yang menyakitkan sampai sistem cache yang otomatis. Kalian juga akan memahami konsep kunci yang menjadi alasan keberadaan library ini: server state dan perbedaannya dengan client state.

#Evolusi Data Fetching di React

#Era useEffect dan Fetch Manual

Di awal masa React, hampir semua aplikasi melakukan data fetching dengan cara yang sama: memanggil fetch di dalam useEffect, menyimpan hasilnya ke useState, dan mengelola loading dan error secara manual:

Pola manual yang melelahkan

function Profile({ userId }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)
 
  useEffect(() => {
    setLoading(true)
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        setUser(data)
        setLoading(false)
      })
  }, [userId])
 
  if (loading) return <p>Memuat...</p>
  return <h1>{user.name}</h1>
}

Masalahnya bukan hanya banyaknya baris. Pola ini tidak punya cache, tidak melakukan deduplication, tidak menangani error dengan konsisten, dan tidak menyinkronkan ulang data yang sudah basi. Setiap komponen yang butuh user yang sama harus fetch lagi.

#Kelahiran react-query

Pada 2019, Tanner Linsley merilis react-query. Idenya sederhana tapi revolusioner: jangan simpan data server di state komponen, tapi di sebuah cache global yang dikelola library. Komponen cukup mendeklarasikan data apa yang dia butuhkan, dan library yang mengurus fetching, caching, dan pembaruan.

#Rebrand menjadi TanStack Query

Seiring bertambahnya framework yang didukung, react-query diubah namanya menjadi TanStack Query dan direorganisasi ke dalam monorepo TanStack. Nama TanStack mencerminkan misi barunya: bukan hanya library React, tapi sekumpulan data-fetching library untuk banyak framework. Versi v5 dirilis pada 2023 dan terus diperbarui sampai 2026 dengan perbaikan dan fitur baru.

#Masalah yang Diselesaikan TanStack Query

#Server State Berbeda dari Client State

Kunci pemahamannya ada di istilah server state. Data yang berasal dari server — daftar user, postingan, saldo rekening — punya karakteristik yang tidak dimiliki state lokal seperti teks input atau posisi scroll:

• Data bisa berubah di sisi server tanpa sepengetahuan aplikasi.
• Data bisa dipakai oleh banyak komponen sekaligus.
• Pengambilan data butuh jaringan, sehingga ada latensi dan kemungkinan gagal.

Karena itu, meniru penyimpanan lokal untuk data server adalah pendekatan yang keliru. TanStack Query memperlakukan data server sebagai cache: disimpan, diberi masa berlaku, dan disinkronkan ulang saat dibutuhkan.

#Fitur Otomatis yang Diberikan Library

Semua yang tadinya dikerjakan manual sekarang otomatis:

• Caching: data tersimpan di cache dan bisa langsung dibaca ulang.
• Deduplication: permintaan identik digabung menjadi satu fetch.
• Background refetch: data disegarkan di latar belakang saat window fokus atau koneksi kembali.
• Retry: permintaan gagal dicoba ulang dengan jeda.
• Invalidation: query tertentu ditandai basi dan di-refetch.

Hasilnya, boilerplate loading dan error menyusut drastis, dan sinkronisasi state antar komponen tidak perlu dikelola manual lagi.

#Ukuran Kecil dan Core yang Framework-Agnostic

TanStack Query sangat ringan — sekitar 13 KB (gzipped) untuk React binding — dan inti logikanya hidup di package @tanstack/query-core yang tidak bergantung pada framework apa pun. Adapter React, Vue, dan Svelte hanyalah lapisan tipis di atas core yang sama.

@tanstack/query-core → logika caching (framework-agnostic)
       ↓
@tanstack/react-query → hooks untuk React
@tanstack/vue-query   → composable untuk Vue
@tanstack/solid-query → primitives untuk Solid

Diagram @tanstack/query-core → @tanstack/react-query menggambarkan alur dependensi: semua adapter memakai core yang sama, sehingga pengetahuan yang kalian dapat dari React berlaku juga untuk framework lain — episode 19 akan membahas ini.

#TanStack Query vs Pendekatan Lain

Sebelum menutup episode, penting untuk tahu bahwa TanStack Query bukan satu-satunya solusi. Ada SWR dari Vercel, RTK Query dari ekosistem Redux, Apollo Client untuk GraphQL, dan tentu saja fetch manual sebagai baseline. Masing-masing punya filosofi berbeda: SWR fokus pada staleness dan lightweight, RTK Query terintegrasi erat dengan Redux Toolkit, Apollo mengurus cache GraphQL yang kompleks.

Perbandingan mendalam dan panduan kapan memilih masing-masing akan kita bahas tuntas di episode 22. Untuk sekarang, ingatlah: TanStack Query unggul pada fleksibilitas, caching yang bisa dikonfigurasi detail, dan ekosistem adapter yang luas.

#Penutup

Episode 1 meletakkan alasan filosofis keberadaan TanStack Query: data server adalah cache, bukan state lokal. Kalian sekarang memahami perjalanan dari useEffect plus fetch manual, kelahiran react-query pada 2019, rebrand menjadi TanStack Query, dan masalah server state yang coba dipecahkan.

Inti yang harus dibawa pulang:

• Data fetching manual dengan useEffect berulang dan penuh boilerplate.
• react-query lahir pada 2019 oleh Tanner Linsley, lalu rebrand menjadi TanStack Query.
• Server state berbeda dari client state dan membutuhkan perlakuan cache.
• Caching, deduplication, background refetch, dan retry diberikan otomatis.
• Core library framework-agnostic dengan ukuran sekitar 13 KB gzipped.
• TanStack Query bukan satu-satunya solusi; perbandingan penuh di episode 22.

Di episode 2 selanjutnya kita akan membahas konsep dasar dan arsitektur utama TanStack Query — model query versus mutation, cara kerja query key menuju cache, dan komponen-komponen utama seperti QueryClient dan QueryClientProvider. Ini fondasi mental yang akan kalian pakai di semua episode berikutnya.