Belajar TanStack Query - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar TanStack Query! Series ini akan membawa kalian menguasai TanStack Query — library server state management paling populer untuk React — yang mengautomasi data fetching, caching, deduplication, dan sinkronisasi data dari server. Total ada 23 episode yang tersusun dari enam fase, dari konsep dasar sampai production readiness.

Tapi sebelum menulis hook pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat penting? Karena TanStack Query bekerja di atas React dan pola async JavaScript. Kalau kalian belum paham Promise atau belum pernah melihat useEffect plus fetch, sebagian besar konsep akan terasa abstrak.

Episode 0 ini adalah peta jalan kalian: memastikan skill dasar, menyiapkan project React dengan Vite, menginstall @tanstack/react-query, dan melakukan verifikasi pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#JavaScript Modern dan Async

TanStack Query dibangun di atas Promise dan async/await. Pastikan kalian nyaman dengan destructuring, arrow function, dan penanganan error dengan try/catch. Berikut pola yang akan sering muncul:

Pola async yang wajib dikuasai

async function getUsers() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users")
  if (!res.ok) {
    throw new Error("Gagal mengambil data")
  }
  return res.json()
}

Perhatikan bahwa fungsi di atas mengembalikan Promise. queryFn di TanStack Query selalu berupa fungsi async seperti ini — detailnya kita bedah di episode 4.

#React Hooks

Wajib paham useState dan useEffect, termasuk pola data fetching manual yang menjadi akar masalah yang ingin diselesaikan library ini:

Pola data fetching manual

function Users() {
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)
 
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((json) => {
        setData(json)
        setLoading(false)
      })
  }, [])
 
  if (loading) return <p>Memuat...</p>
  return <ul>{data.map((u) => <li key={u.id}>{u.name}</li>)}</ul>
}

Pola ini punya masalah: state loading dan error dikelola manual, tidak ada cache, dan setiap komponen yang butuh data yang sama akan melakukan fetch ulang. Semua masalah itu yang akan diselesaikan TanStack Query.

#Konsep REST API

Pahami endpoint, HTTP methods, status code seperti 200, 404, dan 500, serta cara menangani error. Di series ini kita memakai JSONPlaceholder sebagai mock API:

curl -s https://jsonplaceholder.typicode.com/todos/1

Output harus menampilkan JSON todo. curl -s https://jsonplaceholder.typicode.com/todos/1 mengembalikan objek todo — pastikan koneksi internet lancar karena seluruh series memakai endpoint ini.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js dan Package Manager

TanStack Query butuh Node.js versi 18 atau lebih baru. Cek versi di terminal kalian:

node --version
npm --version

Jika keduanya menampilkan versi, lanjut ke langkah berikutnya. Di series ini kita memakai npm, tapi kalian bebas memakai bun karena perintahnya hampir sama.

#Membuat Project Vite

Buat project React baru dengan Vite dan template TypeScript:

npm create vite@latest belajar-query -- --template react-ts
cd belajar-query
npm install

Perintah npm create vite@latest belajar-query -- --template react-ts menghasilkan project React dengan TypeScript. Template TS dipilih karena series ini memakai TypeScript.

#Menginstall TanStack Query

Dengan project siap, install library inti dan devtools:

npm install @tanstack/react-query @tanstack/react-query-devtools

Lalu verifikasi versi yang terpasang:

npm ls @tanstack/react-query

Pastikan versi 5.101.x atau lebih baru — ini stable release terbaru per penulisan series. npm ls @tanstack/react-query menampilkan versi aktual beserta dependency-nya.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan dev server untuk memastikan semuanya bekerja:

npm run dev

Buka http://localhost:5173 di browser. Selama tidak ada error di terminal, environment kalian sudah siap. Episode 3 akan membedah arti QueryClient dan QueryClientProvider secara detail — untuk sekarang cukup pastikan app berjalan tanpa error.

Satu kebiasaan yang akan dipakai sepanjang series: biasakan membuka dokumentasi resmi di https://tanstack.com/query/latest setiap kali menemukan istilah baru. Dokumentasi ini adalah rujukan utama, dan saya akan merujuknya di banyak episode.

#Penutup

Di episode 0 kalian sudah menyiapkan pijakan untuk seluruh series: menguasai pola async JavaScript, memahami masalah data fetching manual, menyiapkan project React dengan Vite, dan menginstall TanStack Query versi 5.101.x.

Inti yang harus dibawa pulang:

• queryFn selalu berupa fungsi async yang mengembalikan Promise.
• Pola useEffect plus fetch manual adalah akar masalah yang ingin dipecahkan library ini.
• TanStack Query butuh Node.js 18+ dan project React yang sudah berjalan.
• Install @tanstack/react-query dan @tanstack/react-query-devtools lewat npm.
• Verifikasi pertama: dev server Vite berjalan tanpa error.
• Dokumentasi resmi ada di tanstack.com/query/latest.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan TanStack Query — dari era data fetching manual, kelahiran react-query oleh Tanner Linsley pada 2019, rebrand menjadi TanStack Query, hingga masalah server state yang coba dipecahkannya. Pastikan environment kalian sudah siap, karena perjalanan Belajar TanStack Query baru saja dimulai!