Belajar TanStack Query - Framework Adapters & Core

#Pendahuluan

Selama delapan belas episode, kalian baru berkenalan dengan satu wajah TanStack Query: React Query. Di balik hook useQuery yang familiar itu ternyata ada satu mesin framework-agnostic bernama @tanstack/query-core. Mesin inilah yang menampung QueryClient, cache, observer, dan seluruh logika retry, deduplication, serta structural sharing yang sudah kalian pelajari.

Episode 19 membuka peti ekosistem adapter: Vue Query, Svelte Query, Solid Query, dan Preact Query. Kalian akan melihat bahwa seluruh adapter memakai konsep yang persis sama — yang berubah hanya idiom reaktivitas tiap framework. Di paruh kedua, kalian belajar memakai QueryClient langsung di luar framework untuk Node services, event handlers, dan skrip batch.

#Ekosistem Adapter Framework

#Vue Query

Vue Query menawarkan komposable dengan nama yang sama seperti hook di React: useQuery, useMutation, dan useInfiniteQuery. Vue Query memakai QueryClientProvider untuk menyuntikkan client ke seluruh aplikasi, dan useQuery di dalam komponen <script setup> bekerja secara reaktif:

Install adapter untuk setiap framework

npm i @tanstack/vue-query
npm i @tanstack/svelte-query
npm i @tanstack/solid-query
npm i @tanstack/preact-query

Vue Query di komponen Vue

<script setup lang="ts">
import { useQuery } from "@tanstack/vue-query"
 
async function fetchTodos() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos")
  if (!res.ok) throw new Error("Gagal mengambil todos")
  return res.json()
}
 
const { data, isPending, isError } = useQuery({
  queryKey: ["todos"],
  queryFn: fetchTodos,
})
</script>

Perhatikan bahwa queryKey, queryFn, dan isPending identik dengan React. useQuery di Vue mengembalikan ref reaktif yang langsung bisa dipakai di template. Pengetahuan dari episode 3 sampai 18 bisa ditransfer nyaris tanpa perubahan konsep.

#Svelte Query

Svelte Query menyajikan primitif yang selaras dengan idiom Svelte: createQuery, createMutation, dan createInfiniteQuery. Nama create dipakai karena Svelte lebih akrab dengan store dan function daripada hook. Konsep query keys, staleTime, dan invalidasi tetap berjalan di atas core yang sama:

Svelte Query di file Svelte

<script lang="ts">
  import { createQuery } from "@tanstack/svelte-query"
  import { client } from "../lib/query-client"
 
  const query = createQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
  })
</script>
 
{#if $query.isPending}
  <p>Memuat data...</p>
{:else if $query.isError}
  <p>Terjadi error: {$query.error.message}</p>
{:else}
  <ul>
    {#each $query.data as todo}
      <li>{todo.title}</li>
    {/each}
  </ul>
{/if}

createQuery mengembalikan store Svelte yang dibaca dengan prefix dollar. $query.data dan $query.isPending bekerja persis seperti data dan isPending di React, karena keduanya hanyalah proyeksi dari state cache yang sama.

#Solid Query dan Preact Query

Solid Query memakai primitif reaktivitas Solid: createQuery dengan sinyal, cocok untuk aplikasi Solid dengan performa granular. Preact Query hadir sebagai @tanstack/preact-query dengan API yang hampir identik dengan React Query, sehingga tim yang memakai Preact tidak perlu belajar ulang.

Keempat adapter ini plus Angular (masih eksperimental) dan Lit dikelola di satu monorepo TanStack/query. Mereka tidak menduplikasi logika: semuanya adalah kulit tipis di atas @tanstack/query-core, yang berbicara tentang observer, cache, dan query state.

#@tanstack/query-core: Mesin Bersama

Ekosistem adapter hanya masuk akal karena core-nya framework-agnostic. Paket @tanstack/query-core tidak bergantung pada React, Vue, Svelte, ataupun Solid — ia hanya berurusan dengan JavaScript dan TypeScript murni. Inilah alasan kenapa @tanstack/query-core bisa dipakai di mana saja, termasuk di Node.

Struktur dependensi adapter terlihat jelas dari package manifest. Setiap adapter mendeklarasikan core sebagai dependency:

Dependensi adapter terhadap core

{
  "name": "@tanstack/react-query",
  "dependencies": {
    "@tanstack/query-core": "5.101.2"
  }
}

Konsekuensinya menarik: ketika kalian memahami cara kerja cache di React, pemahaman itu berlaku di Vue, Svelte, dan Solid. retry, gcTime, invalidateQueries, dan structural sharing adalah perilaku core — bukan fitur React. Adapter hanya bertugas mentranslasi observasi state menjadi mekanisme render framework masing-masing.

#QueryClient di Luar Framework

#Node Services

Karena core tidak peduli pada framework, QueryClient bisa diinstantiasi dan dipakai di luar UI. Ini berguna untuk layanan Node yang ingin memanfaatkan cache, deduplication, dan retry tanpa menulis ulang logika tersebut:

QueryClient di layanan Node

import { QueryClient } from "@tanstack/query-core"
 
export const client = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,
      retry: 2,
    },
  },
})
 
export async function loadTodos() {
  return client.fetchQuery({
    queryKey: ["todos"],
    queryFn: () =>
      fetch("https://jsonplaceholder.typicode.com/todos").then((res) => {
        if (!res.ok) throw new Error("Gagal mengambil todos")
        return res.json()
      }),
  })
}

fetchQuery adalah versi imperatif dari useQuery: ia langsung mengambil data, mengisinya ke cache, dan mengembalikan Promise. Dua proses yang memanggil loadTodos secara bersamaan tidak akan menduplikasi fetch — deduplication di core bekerja tanpa perlu observer dari framework mana pun.

#Event Handlers dan Skrip

Caching juga berguna di luar permintaan UI. Misalnya handler queue yang perlu menandai data basi setelah pesan event masuk, atau skrip batch yang memanfaatkan cache untuk menghindari panggilan API berulang:

Invalidasi dari event handler

import { client } from "./query-client"
 
export async function handleTodoCreated(event) {
  await client.invalidateQueries({ queryKey: ["todos"] })
  console.log("Cache todos ditandai basi setelah:", event.title)
}

Pola ini sangat berharga di arsitektur realtime: ketika webhook atau message broker memberi tahu bahwa data berubah, satu pemanggilan invalidateQueries bisa menandai seluruh cache yang relevan sebagai basi. UI yang sedang aktif akan otomatis di-refetch — sinkronisasi lintas proses tanpa kode manual.

#Penutup

Episode 19 melebarkan cakrawala: TanStack Query bukan library React, melainkan mesin server state dengan adapter untuk React, Vue, Svelte, Solid, dan Preact. @tanstack/query-core yang framework-agnostic bisa dipakai langsung di Node, event handlers, dan skrip.

Inti yang harus dibawa pulang:

Semua adapter berbagi mesin @tanstack/query-core.
useQuery di React setara useQuery di Vue dan createQuery di Svelte.
Konsep query keys, staleTime, dan invalidasi berlaku lintas framework.
QueryClient bisa dipakai di Node tanpa framework apa pun.
fetchQuery adalah versi imperatif dari useQuery.
invalidateQueries dari event handler menyinkronkan UI secara otomatis.

Di episode 20 selanjutnya kita akan membahas fitur stabil terbaru v5.x — API keyed-object, useSuspenseQuery, structural sharing, retry default, dukungan React 19, hingga rilis v5.101.x pada Juli 2026 dan arah menuju Query v6.