Belajar TanStack - Advanced Query Patterns

#Pendahuluan

Episode 4 dan 5 membangun fondasi query dan mutasi. Sekarang kalian butuh pola yang muncul di aplikasi nyata: data yang sudah dimuat sebelum halaman dibuka, query yang dibatalkan saat komponen ditinggalkan, query yang saling bergantung, dan data yang tetap sinkron di beberapa tab browser.

Episode 8 membahas empat advanced query patterns: prefetching, cancellation, dependent dan parallel queries, serta sinkronisasi server state antar tab. Setiap pola mengatasi masalah performa atau konsistensi yang nyata.

Pola-pola ini membedakan aplikasi yang terasa lambat dari yang terasa instan. Semuanya tetap memakai satu alat yang sama — queryClient dan hook yang sudah kalian kenal.

#Query Prefetching

#Memuat Data Sebelum Dibutuhkan

Prefetching menulis data ke cache sebelum komponen merender, sehingga useQuery dengan queryKey yang sama langsung mendapat data tanpa loading. Tempat terbaik untuk prefetch adalah loader router:

Prefetch di router loader

const detailRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "detail/$id",
  loader: async ({ params, context }) => {
    await context.queryClient.prefetchQuery({
      queryKey: ["detail", params.id],
      queryFn: () => ambilDetail(params.id),
    })
  },
})

prefetchQuery({ queryKey, queryFn }) mengisi cache tanpa memicu render. Saat komponen detail di-render dan memanggil useQuery dengan key yang sama, data sudah ada — user melihat halaman penuh tanpa flash loading.

#Prefetch pada Hover Link

Prefetch juga bisa dipicu saat user mengarahkan kursor ke link, memakai queryClient.prefetchQuery di event handler. Kombinasi prefetch router dan hover membuat navigasi terasa seketika.

#Query Cancellation

#AbortSignal pada Query Function

TanStack Query meneruskan signal dari AbortController ke query function. Saat query di-cancel, fetch ikut dibatalkan:

Query function dengan AbortSignal

const { data } = useQuery({
  queryKey: ["laporan"],
  queryFn: ({ signal }) =>
    fetch("/api/laporan", { signal }).then((res) => res.json()),
})

fetch("/api/laporan", { signal }) membatalkan request saat sinyal dikirim. TanStack Query memicu ini saat komponen unmount, saat query di-cancel lewat queryClient.cancelQueries, atau saat queryKey berubah. Hasilnya tidak ada request mubazir yang menghabiskan bandwidth.

#Dependent dan Parallel Queries

#Query yang Bergantung pada Query Lain

Dependent query menunggu data query lain sebelum berjalan. Gunakan enabled dan gabungkan nilai dependen ke queryKey:

Dependent query dengan enabled

const { data: pengguna } = useQuery({
  queryKey: ["pengguna"],
  queryFn: ambilPengguna,
})
 
const { data: postingan } = useQuery({
  queryKey: ["postingan", pengguna?.id],
  queryFn: () => ambilPostingan(pengguna.id),
  enabled: Boolean(pengguna?.id),
})

enabled: Boolean(pengguna?.id) mencegah query kedua berjalan sebelum pengguna.id tersedia. Memasukkan pengguna?.id ke queryKey memastikan cache terpisah per pengguna — ganti pengguna berarti ganti data, bukan query basi.

#Parallel Queries

Beberapa useQuery dalam satu komponen otomatis berjalan paralel. TanStack Query mendeteksi query baru di setiap render dan mengeksekusinya bersamaan — tidak ada satu pun yang menunggu yang lain, kecuali memang disengaja memakai dependent pattern.

#Sinkronisasi Server State antar Tab

#Refetch Otomatis di Semua Tab

Secara default, refetch saat window fokus hanya terjadi di tab yang aktif. Untuk menyinkronkan seluruh tab, tanamkan BroadcastChannel ke queryClient:

Refetch otomatis antar tab

import { BroadcastChannel } from "broadcast-channel"
 
const channel = new BroadcastChannel("tanstack-cache")
 
channel.onmessage = (event) => {
  if (event.data.type === "refetch") {
    queryClient.refetchQueries({ type: "active" })
  }
}

new BroadcastChannel("tanstack-cache") membuat saluran komunikasi antar tab dari origin yang sama. Saat satu tab menerima pesan refetch, seluruh tab aktif memanggil queryClient.refetchQueries({ type: "active" }) sehingga data selalu tampil identik di mana pun user bekerja.

#Penutup

Episode 8 menutup pola query lanjutan: prefetching di loader dan hover untuk navigasi instan, cancellation dengan AbortSignal untuk membuang request mubazir, dependent dan parallel queries untuk mengatur urutan serta kecepatan, dan BroadcastChannel untuk sinkronisasi antar tab.

Inti yang harus dibawa pulang:

• PrefetchQuery menulis data ke cache sebelum komponen dirender.
• Loader router adalah tempat ideal untuk prefetching.
• Signal dari queryFn membatalkan fetch saat query di-cancel.
• Enabled mengatur dependent query; gabungkan dependensi ke queryKey.
• Query paralel berjalan bersamaan tanpa menunggu satu sama lain.
• BroadcastChannel menyinkronkan refetch di semua tab aktif.

Di episode 9 selanjutnya kita akan membahas table advanced features — column visibility dan grouping, aggregation, row selection dan expansion, virtualized tables dengan TanStack Virtual, serta custom cell rendering. Kembali ke TanStack Table, tapi dengan fitur yang dipakai di aplikasi enterprise!