Learn TanStack - Ecosystem Integration & Patterns

#Introduction

After mastering each library, it's time to look at TanStack as part of a bigger ecosystem. Episode 18 covers integrating TanStack with React frameworks like Next.js, Remix, and Vite, using the libraries in vanilla JS and framework-agnostic environments, sharing state between components and features, and architectural patterns for TanStack-based apps.

Throughout the previous episodes you built a single React app under simple environment assumptions. In episode 18 you'll see that framework choices heavily influence how Query, Router, and Table are integrated, while understanding that the headless principle keeps TanStack libraries useful even outside React.

By the end of this episode, you'll have a clear map for integrating TanStack in real projects and designing an architecture that is clean, consistent, and easy to grow.

#Integration with React Frameworks

#Next.js App Router and Server Components

Next.js 15 with the App Router brings server components. TanStack Query still lives in client components, while data can be prefetched on the server and hydrated into the client cache using dehydrate and HydrationBoundary. This pattern avoids duplicate requests and keeps the cache warm from the first render.

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) turns the cache into a serializable structure, then HydrationBoundary feeds it back into the client cache in the browser. Components inside the layout just use regular useQuery and the data is available without loading.

#Remix and Loaders

Remix already has loaders that run on the server. TanStack Query is placed on the client side for client-side navigation, so the combination gives you server-rendering speed along with a reactive cache. queryClient.ensureQueryData becomes the ideal bridge between loaders and the cache.

#Vite as the Primary Build Tool

Vite is the most popular dev bundler for modern React projects because of its fast HMR and minimal configuration. TanStack Router also provides an official Vite plugin that handles code splitting and auto-generates the route tree.

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

The command npm create vite@latest aplikasi-tanstack -- --template react-ts creates a React + TypeScript project in seconds. The @tanstack/router-vite-plugin is installed so the route tree doesn't need to be written by hand.

#Vanilla JS and Framework-Agnostic Environments

One of TanStack's core values is framework-independent core libraries. @tanstack/query-core contains a pure QueryClient with no React, and adapters like @tanstack/react-query or @tanstack/solid-query just attach a reactive layer on top. This means the caching logic can be used in Node, workers, or any framework.

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() works without React and without the DOM. This pattern is useful for pre-warming the cache in a background worker or for libraries that need cross-process request deduplication.

#Sharing State Between Components and Features

TanStack provides several levels of state sharing. The same QueryClient is spread through QueryClientProvider, so useQuery in any component reads the same cache and identical queries are automatically deduplicated. The Router carries search and location state readable across components, while Table keeps internal state that can be hooked into the URL.

Custom hook untuk state terpusat

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

A custom hook like usePengguna(ids) becomes the single entry point for user data across features. Because the query key is consistent, different components share the same cache with no manual sync code.

#Architectural Patterns for TanStack Apps

Several architecture patterns prove a good fit for TanStack apps. The first is colocation: each feature wraps its own code along with its hooks, components, and query keys. The second is the query key factory, keeping keys consistent so invalidation never misses. The third is render-as-you-fetch, combining Router loaders with prefetchQuery so data is ready before components appear.

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) produces a key that's consistent across the whole codebase. When user data changes, a single invalidateQueries({ queryKey: penggunaKeys.all }) call is enough to refresh every user detail.

#Conclusion

Episode 18 wrapped up the ecosystem side: integration with Next.js, Remix, and Vite, using the core libraries in vanilla JS, sharing state between components, and the colocation, query key factory, and render-as-you-fetch architecture patterns.

Key takeaways:

• Next.js uses dehydrate and HydrationBoundary to pre-fetch from the server.
• Remix places TanStack Query on the client and ensureQueryData in loaders.
• Vite is the primary build tool with TanStack Router's official plugin.
• The TanStack core is framework-agnostic and usable in vanilla JS and Node.
• Custom hooks and query key factories unify state sharing.
• Render-as-you-fetch unites Router loaders and prefetchQuery.

In the next episode, episode 19, we'll discuss modern tooling and build automation — build configuration with Vite, Webpack, or esbuild, TypeScript integration for type-safe builds, dependency management and plugin configuration, and CI/CD pipelines for TanStack-based apps. Your code foundation is mature; now it's the build foundation's turn!