Belajar TanStack - Ecosystem Integration & Patterns

#Pendahuluan

Setelah menguasai masing-masing library, sekarang waktunya melihat TanStack sebagai bagian dari ekosistem yang lebih besar. Episode 18 membahas integrasi TanStack dengan React frameworks seperti Next.js, Remix, dan Vite, penggunaan library di vanilla JS dan environment framework-agnostic, sharing state antar komponen dan fitur, serta architectural patterns untuk aplikasi berbasis TanStack.

Selama episode-episode sebelumnya kalian membangun satu aplikasi React dengan asumsi lingkungan yang sederhana. Di episode 18 kalian akan melihat bahwa keputusan framework sangat memengaruhi cara mengintegrasikan Query, Router, dan Table, sekaligus memahami bahwa prinsip headless membuat library TanStack tetap berguna di luar React sekalipun.

Di akhir episode ini, kalian memiliki peta yang jelas untuk mengintegrasikan TanStack di project nyata dan merancang arsitektur yang rapi, konsisten, dan mudah dikembangkan.

#Integrasi dengan React Frameworks

#Next.js App Router dan Server Components

Next.js 15 dengan App Router menghadirkan server components. TanStack Query tetap hidup di client component, sementara data dapat di-prefetch dari server lalu dihidrasi ke cache client memakai dehydrate dan HydrationBoundary. Pola ini menghindari request ganda dan menjaga cache tetap hangat sejak render pertama.

Prefetch di server lalu hidrasi

import { dehydrate, HydrationBoundary } from "@tanstack/react-query"
import { queryClient } from "@/lib/queryClient"
import { ambilPengguna } from "@/lib/api"
 
export async function PenggunaLayout({ children }) {
  await queryClient.prefetchQuery({
    queryKey: ["pengguna"],
    queryFn: ambilPengguna,
  })
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      {children}
    </HydrationBoundary>
  )
}

dehydrate(queryClient) mengubah cache menjadi struktur serializable, lalu HydrationBoundary memasukkannya kembali ke cache client di sisi browser. Komponen di dalam layout cukup memakai useQuery biasa dan data langsung tersedia tanpa loading.

#Remix dan Loaders

Remix sudah memiliki loader yang berjalan di server. TanStack Query ditempatkan di sisi client untuk navigasi client-side, sehingga kombinasi keduanya memberi kecepatan server rendering sekaligus cache yang reaktif. queryClient.ensureQueryData menjadi jembatan ideal antara loader dan cache.

#Vite sebagai Build Tool Utama

Vite adalah bundler dev paling populer untuk project React modern karena HMR-nya cepat dan konfigurasinya minim. TanStack Router juga menyediakan plugin resmi untuk Vite yang mengerjakan code splitting dan autogenerate route tree secara otomatis.

Setup Vite dengan TanStack Router

npm create vite@latest aplikasi-tanstack -- --template react-ts
cd aplikasi-tanstack
npm i @tanstack/react-router @tanstack/router-vite-plugin

Perintah npm create vite@latest aplikasi-tanstack -- --template react-ts membuat project React + TypeScript dalam hitungan detik. Plugin @tanstack/router-vite-plugin dipasang agar route tree tidak perlu ditulis manual.

#Vanilla JS dan Environment Framework-Agnostic

Salah satu nilai utama TanStack adalah core library yang tidak bergantung framework. @tanstack/query-core berisi QueryClient murni tanpa React, dan adapter seperti @tanstack/react-query atau @tanstack/solid-query tinggal menempelkan layer reaktif di atasnya. Ini berarti logika caching bisa dipakai di Node, worker, atau framework apa pun.

QueryClient murni di vanilla JS

import { QueryClient } from "@tanstack/query-core"
 
const client = new QueryClient()
 
await client.prefetchQuery({
  queryKey: ["statistik"],
  queryFn: () => fetch("/api/statistik").then((r) => r.json()),
})

new QueryClient() bekerja tanpa React dan tanpa DOM. Pola ini berguna untuk pre-warming cache di background worker atau untuk library yang membutuhkan deduplication request lintas proses.

TanStack menyediakan beberapa level sharing state. QueryClient yang sama disebarkan lewat QueryClientProvider, sehingga useQuery di komponen mana pun membaca cache yang sama dan query yang identik otomatis di-deduplicate. Router membawa state search dan location yang bisa dibaca lintas komponen, sedangkan Table menyimpan state internal yang bisa di-hook ke URL.

Custom hook untuk state terpusat

export function usePengguna(ids) {
  return useQuery({
    queryKey: ["pengguna", ids],
    queryFn: () => ambilBanyakPengguna(ids),
    staleTime: 5 * 60 * 1000,
  })
}

Custom hook seperti usePengguna(ids) menjadi satu titik masuk untuk data pengguna di seluruh fitur. Karena query key konsisten, komponen yang berbeda akan berbagi cache yang sama tanpa kode sinkronisasi manual.

#Architectural Patterns untuk Aplikasi TanStack

Ada beberapa pola arsitektur yang terbukti cocok untuk aplikasi TanStack. Yang pertama adalah colocation: setiap fitur membungkus kode sendiri beserta hooks, komponen, dan query key-nya. Kedua, query key factory menjaga konsistensi key sehingga invalidasi tidak meleset. Ketiga, render-as-you-fetch dengan kombinasi loader Router dan prefetchQuery membuat data sudah siap sebelum komponen muncul.

Query key factory

export const penggunaKeys = {
  all: ["pengguna"] as const,
  detail: (id) => [...penggunaKeys.all, "detail", id] as const,
}
 
queryClient.invalidateQueries({ queryKey: penggunaKeys.all })

penggunaKeys.detail(id) menghasilkan key yang konsisten di seluruh kode. Saat data pengguna berubah, satu panggilan invalidateQueries({ queryKey: penggunaKeys.all }) sudah cukup menyegarkan semua detail pengguna.

#Penutup

Episode 18 menutup sisi ekosistem: integrasi dengan Next.js, Remix, dan Vite, penggunaan core library di vanilla JS, sharing state antar komponen, dan pola arsitektur colocation, query key factory, serta render-as-you-fetch.

Inti yang harus dibawa pulang:

Next.js memakai dehydrate dan HydrationBoundary untuk pre-fetch dari server.
Remix menempatkan TanStack Query di client dan ensureQueryData di loader.
Vite menjadi build tool utama dengan plugin resmi TanStack Router.
Core TanStack framework-agnostic bisa dipakai di vanilla JS dan Node.
Custom hooks dan query key factory menyatukan sharing state.
Render-as-you-fetch menyatukan loader Router dan prefetchQuery.

Di episode 19 selanjutnya kita akan membahas tooling modern dan build automation — konfigurasi build dengan Vite, Webpack, atau esbuild, integrasi TypeScript untuk build yang type-safe, manajemen dependency dan konfigurasi plugin, serta pipeline CI/CD untuk aplikasi berbasis TanStack. Fondasi kode kalian sudah matang, sekarang giliran fondasi build!