Belajar TanStack - Building a Full-stack Data App

#Pendahuluan

Semua materi dari episode 0 sampai 22 kini bertemu di satu titik: membangun aplikasi data full-stack yang nyata. Episode 23 merancang arsitektur end-to-end dengan TanStack, menggabungkan query caching, table rendering, dan routing dalam satu aplikasi, mempertimbangkan tradeoff performa dan UX, serta menutup dengan deployment dan maintenance siap production.

Aplikasi studi kasusnya adalah dashboard inventaris: tabel produk dengan sorting dan filter, detail produk per route, mutasi stok dengan optimistic update, dan ringkasan statistik. Tiga masalah khas aplikasi data-driven yang sudah kalian latih di episode-episode sebelumnya.

Di akhir episode, kalian melihat bagaimana keputusan kecil yang konsisten selama 24 episode menghasilkan aplikasi yang cepat, type-safe, dan mudah dipelihara.

#Arsitektur End-to-end dengan TanStack

#Memetakan Fitur ke Library

Setiap bagian aplikasi dipetakan ke library yang paling tepat: Query untuk server state dan caching, Router untuk navigasi dan loading data per halaman, Table untuk datagrid inventaris, dan Virtual untuk daftar produk yang panjang.

Arsitektur satu halaman dashboard

const inventarisRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "inventaris",
  validateSearch: z.object({
    halaman: z.number().default(1),
    q: z.string().optional(),
  }),
  loader: ({ context, search }) =>
    context.queryClient.ensureQueryData({
      queryKey: ["inventaris", search],
      queryFn: () => ambilInventaris(search),
    }),
  component: HalamanInventaris,
})

loader pada route memanggil ensureQueryData agar data sudah tersedia sebelum komponen dirender. Search params halaman dan q divalidasi dengan Zod, sehingga URL selalu membawa state yang sah dan tipe-nya terbawa sampai ke komponen.

#Satu Sumber Kebenaran

Cache Query menjadi satu-satunya sumber data di client. Komponen tidak pernah menyimpan salinan data server; mereka membaca cache dan menunggu mutasi memperbaruinya lewat invalidasi.

#Menggabungkan Query Caching, Table Rendering, dan Routing

#Data Mengisi Table, URL Menyimpan State

Table tidak menyimpan filter dan sorting sendiri; ia membaca dari search params Router dan menulis kembali perubahan ke URL. Query memakai nilai tersebut sebagai query key, sehingga navigasi dan fetch selalu selaras.

Table membaca state dari URL

const table = useReactTable({
  data: inventaris?.items ?? [],
  columns,
  state: {
    sorting: search.sorting,
    pagination: { pageIndex: search.halaman - 1, pageSize: 10 },
  },
  onSortingChange: (updater) =>
    navigate({ search: { ...search, sorting: result(updater) } }),
})

pagination dan sorting table membaca nilai dari search. Setiap perubahan ditulis balik ke URL, sehingga refresh halaman tidak mengembalikan pengguna ke kondisi awal.

#Mutasi dan Optimistic Update

Ketika stok diubah, useMutation memperbarui UI optimis lebih dulu, lalu invalidasi query inventaris menyinkronkan data dengan server. Kegagalan mutasi memicu rollback otomatis berkat state optimis TanStack.

#Performance dan UX Tradeoffs

#Memilih Jumlah Data per Halaman

Tidak semua data bisa dilayani dengan satu pola. Query per halaman memberi respons cepat untuk tabel, sedangkan daftar raksasa memakai virtual scrolling. Keputusan ini memengaruhi arsitektur secara keseluruhan.

Prefetch halaman berikutnya

const prefetchHalamanBerikutnya = () => {
  void queryClient.prefetchQuery({
    queryKey: ["inventaris", { ...search, halaman: search.halaman + 1 }],
    queryFn: () => ambilInventaris({ ...search, halaman: search.halaman + 1 }),
  })
}

prefetchQuery untuk halaman berikutnya membuat pagination terasa instan karena data sudah masuk cache sebelum pengguna menekan tombol. Tradeoffnya adalah bandwidth ekstra yang dihabiskan untuk data yang belum tentu dibuka.

#Menjaga UX Tetap Ringan

Gunakan loading skeleton yang proporsional, pertahankan data lama selama refetch (placeholderData), dan beri feedback jelas saat mutasi berjalan. Kombinasi ini membuat aplikasi terasa responsif meski backend sedang lambat.

#Deployment dan Maintenance Siap Production

#Pipeline dan Monitoring Berjalan Penuh

Aplikasi ini memakai seluruh fondasi dari episode 19 sampai 21: build dengan Vite dan TypeScript, pipeline CI yang menjalankan lint dan typecheck, deployment ke platform hosting, serta observability yang mengirim metrik query dan error.

npm run typecheck && npm run build
git tag v1.0.0 && git push origin main

npm run typecheck && npm run build adalah gerbang terakhir sebelum rilis. Tag versi kemudian menandai titik release yang bisa di-rollback kapan saja.

#Maintenance yang Berkelanjutan

Dokumentasikan keputusan arsitektur, jaga query key factory tetap terpusat, dan jadwalkan upgrade library bertahap. Aplikasi yang mudah dipelihara adalah aplikasi yang bisa dirombak tanpa rasa takut.

#Penutup

Episode 23 menutup series ini dengan aplikasi dashboard inventaris end-to-end: arsitektur yang memetakan fitur ke library TanStack, sinkronisasi table state ke URL, prefetch dan optimistic update untuk UX, serta pipeline dan observability untuk production.

Inti yang harus dibawa pulang:

• Pemetaan fitur ke library yang tepat membuat arsitektur tetap sederhana.
• Cache Query menjadi satu-satunya sumber kebenaran data di client.
• State table hidup di URL agar navigasi dan fetch selalu selaras.
• Prefetch dan optimistic update menjaga UX tetap responsif.
• Typecheck dan build adalah gerbang terakhir sebelum rilis.
• Query key factory dan dokumentasi menjaga aplikasi tetap mudah dirawat.

Series Belajar TanStack telah selesai. Dari pre-requisites di episode 0 sampai aplikasi full-stack di episode 23, kalian telah menempuh seluruh perjalanan: memahami arsitektur Query, Table, Router, Virtual, dan Charts, menguasai pola lanjutan, hingga mengantarkan aplikasi ke production dengan observability dan maintenance yang sehat. Terapkan fondasi ini di project kalian, terus ikuti pembaruan ekosistem, dan jadikan TanStack bagian dari perangkat kerja sehari-hari kalian. Selamat membangun!