Belajar TanStack - Memulai Proyek dengan TanStack

#Pendahuluan

Dua episode pertama membangun pemahaman konseptual. Sekarang saatnya beraksi: membangun proyek React dengan seluruh ekosistem TanStack terpasang dan terkonfigurasi dengan benar. Proyek ini akan menjadi rumah bagi kode-kode eksperimen di seluruh series.

Episode 3 mencakup scaffold proyek dengan Vite, instalasi TanStack Query, Table, Router, Virtual, dan Charts, struktur folder yang direkomendasikan, serta konfigurasi TypeScript dan ESLint agar kode kalian konsisten.

Pastikan toolchain episode 0 sudah berfungsi sebelum memulai. Jika sudah, langsung ikuti langkah demi langkah di bawah ini.

#Setup Proyek React dengan Vite

#Scaffold dengan Template React-TypeScript

Vite adalah build tool utama kita. Jalankan scaffold berikut:

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

npm create vite@latest belajar-tanstack -- --template react-ts membuat proyek dengan TypeScript aktif. Setelah npm install, jalankan npm run dev untuk memastikan halaman boilerplate tampil di http://localhost:5173.

#Instalasi Kelima Library TanStack

#Paket Inti

Sekarang install seluruh library TanStack sekaligus:

npm i @tanstack/react-query @tanstack/react-query-devtools
npm i @tanstack/react-table
npm i @tanstack/react-router @tanstack/router-plugin
npm i @tanstack/react-virtual
npm i @tanstack/react-charts

Ringkasan per paket:

• @tanstack/react-query: hooks data fetching dan caching.
• @tanstack/react-query-devtools: panel debugging query.
• @tanstack/react-table: core table headless.
• @tanstack/react-router: router type-safe.
• @tanstack/router-plugin: plugin Vite untuk file-based routing.
• @tanstack/react-virtual: virtualisasi list dan tabel.
• @tanstack/react-charts: chart untuk dashboard.

#Verifikasi Instalasi

Periksa daftar dependency di package.json:

"dependencies": {
  "@tanstack/react-charts": "^2.0.0",
  "@tanstack/react-query": "^5.0.0",
  "@tanstack/react-table": "^8.0.0",
  "@tanstack/react-virtual": "^3.0.0"
}

Semua paket memakai prefix @tanstack/*. Versi mayor yang terpasang bisa berbeda dari contoh di atas — itu wajar, TanStack rutin merilis versi minor dan mayor.

#Struktur Folder saat Memakai TanStack

#Layout yang Direkomendasikan

Struktur berikut memisahkan query, table, router, dan komponen sehingga scale-friendly:

src/
├── components/     # komponen UI umum
├── features/       # fitur per modul: todos, dashboard
├── hooks/          # custom hooks memakai useQuery
├── routes/         # route tree TanStack Router
├── lib/            # queryClient, fetchers, helpers
├── main.tsx
└── App.tsx

Folder lib/ adalah tempat queryClient dibuat sekali lalu diimpor di mana saja. routes/ berisi definisi route, dan hooks/ menampung query function agar komponen tetap ramping. Pola ini akan dipakai mulai episode 4.

#Konfigurasi TypeScript dan ESLint

#tsconfig untuk TanStack Router

Router type-safe memerlukan pengaturan khusus di tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "bundler",
    "jsx": "react-jsx"
  }
}

strict: true mengaktifkan type checking ketat yang dibutuhkan inferensi Router dan Query. moduleResolution: "bundler" cocok untuk proyek Vite. Jika memakai file-based routing, tambahkan tanstackRouterPlugin di vite.config.ts agar route codegen berjalan otomatis.

#ESLint dan Prettier

Proyek Vite React-TS sudah membawa konfigurasi ESLint. Pastikan format tetap rapi dengan Prettier:

npm i -D prettier eslint-config-prettier

Tambahkan eslint-config-prettier di akhir daftar extends konfigurasi ESLint agar rule Prettier tidak bentrok dengan rule lint. Dengan begitu, format kode otomatis seragam di seluruh tim.

#Penutup

Episode 3 menyelesaikan setup: proyek Vite React-TypeScript dibuat, kelima library TanStack terpasang, struktur folder disusun, dan TypeScript serta ESLint dikonfigurasi. Dari sini, kalian punya panggung untuk menulis query pertama di episode 4.

Inti yang harus dibawa pulang:

• Vite adalah build tool utama: npm create vite untuk scaffold.
• Semua library terpasang lewat prefix @tanstack/*.
• @tanstack/react-query-devtools berguna untuk debugging.
• Struktur folder memisahkan lib, hooks, features, dan routes.
• strict: true di tsconfig penting untuk inferensi tipe.
• Prettier dengan eslint-config-prettier menjaga konsistensi kode.

Di episode 4 selanjutnya kita akan membahas query dan data fetching — QueryClientProvider, useQuery, staleTime dan gcTime, error handling dengan retry, serta background refetching. Inilah episode inti yang mengubah cara kalian mengambil data di React. Pastikan npm run dev berjalan, karena eksperimen pertama dimulai!