tanstack-query

function Todos() { const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos, throwOnError: true, // ✅ v5 (was useErrorBoundary in v4) }) return

Network Mode (Offline/PWA Support)

Control behavior when offline:

const queryClient = new QueryClient({ defaultOptions: { queries: { networkMode: 'offlineFirst', // Use cache when offline }, }, })

// Per-query override useQuery({ queryKey: ['todos'], queryFn: fetchTodos, networkMode: 'always', // Always try, even offline (for local APIs) })

Mode Behavior online (default) Only fetch when online always Always try (useful for local/service worker APIs) offlineFirst Use cache first, fetch when online

Detecting paused state:

const { isPending, fetchStatus } = useQuery(...) // isPending + fetchStatus === 'paused' = offline, waiting for network

useQueries with Combine

Combine results from parallel queries:

const results = useQueries({ queries: userIds.map(id => ({ queryKey: ['user', id], queryFn: () => fetchUser(id), })), combine: (results) => ({ data: results.map(r => r.data), pending: results.some(r => r.isPending), error: results.find(r => r.error)?.error, }), })

// Access combined result if (results.pending) return console.log(results.data) // [user1, user2, user3]

infiniteQueryOptions Helper

Type-safe factory for infinite queries (parallel to queryOptions):

import { infiniteQueryOptions, useInfiniteQuery, prefetchInfiniteQuery } from '@tanstack/react-query'

const todosInfiniteOptions = infiniteQueryOptions({ queryKey: ['todos', 'infinite'], queryFn: ({ pageParam }) => fetchTodosPage(pageParam), initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextCursor, })

// Reuse across hooks useInfiniteQuery(todosInfiniteOptions) useSuspenseInfiniteQuery(todosInfiniteOptions) prefetchInfiniteQuery(queryClient, todosInfiniteOptions)

maxPages - Memory Optimization

Limit pages stored in cache for infinite queries:

useInfiniteQuery({ queryKey: ['posts'], queryFn: ({ pageParam }) => fetchPosts(pageParam), initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextCursor, getPreviousPageParam: (firstPage) => firstPage.prevCursor, // Required with maxPages maxPages: 3, // Only keep 3 pages in memory })

Note: maxPages requires bi-directional pagination (getNextPageParam AND getPreviousPageParam).

Quick Setup npm install @tanstack/react-query@latest npm install -D @tanstack/react-query-devtools@latest

Step 2: Provider + Config // src/main.tsx import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5, // 5 min gcTime: 1000 * 60 * 60, // 1 hour (v5: renamed from cacheTime) refetchOnWindowFocus: false, }, }, })

Step 3: Query + Mutation Hooks // src/hooks/useTodos.ts import { useQuery, useMutation, useQueryClient, queryOptions } from '@tanstack/react-query'

// Query options factory (v5 pattern) export const todosQueryOptions = queryOptions({ queryKey: ['todos'], queryFn: async () => { const res = await fetch('/api/todos') if (!res.ok) throw new Error('Failed to fetch') return res.json() }, })

export function useTodos() { return useQuery(todosQueryOptions) }

export function useAddTodo() { const queryClient = useQueryClient() return useMutation({ mutationFn: async (newTodo) => { const res = await fetch('/api/todos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newTodo), }) if (!res.ok) throw new Error('Failed to add') return res.json() }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['todos'] }) }, }) }

// Usage: function TodoList() { const { data, isPending, isError, error } = useTodos() const { mutate } = useAddTodo()

if (isPending) return

{data.map(todo =>
• {todo.title}
)}

Critical Rules Always Do

✅ Use object syntax for all hooks

// v5 ONLY supports this: useQuery({ queryKey, queryFn, ...options }) useMutation({ mutationFn, ...options })

✅ Use array query keys

queryKey: ['todos'] // List queryKey: ['todos', id] // Detail queryKey: ['todos', { filter }] // Filtered

✅ Configure staleTime appropriately

staleTime: 1000 * 60 * 5 // 5 min - prevents excessive refetches

✅ Use isPending for initial loading state

if (isPending) return // isPending = no data yet AND fetching

✅ Throw errors in queryFn

if (!response.ok) throw new Error('Failed')

✅ Invalidate queries after mutations

onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['todos'] }) }

✅ Use queryOptions factory for reusable patterns

const opts = queryOptions({ queryKey, queryFn }) useQuery(opts) useSuspenseQuery(opts) prefetchQuery(opts)

✅ Use gcTime (not cacheTime)

gcTime: 1000 * 60 * 60 // 1 hour

Never Do

❌ Never use v4 array/function syntax

// v4 (removed in v5): useQuery(['todos'], fetchTodos, options) // ❌

// v5 (correct): useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) // ✅

❌ Never use query callbacks (onSuccess, onError, onSettled in queries)

// v5 removed these from queries: useQuery({ queryKey: ['todos'], queryFn: fetchTodos, onSuccess: (data) => {}, // ❌ Removed in v5 })

// Use useEffect instead: const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) useEffect(() => { if (data) { // Do something } }, [data])

// Or use mutation callbacks (still supported): useMutation({ mutationFn: addTodo, onSuccess: () => {}, // ✅ Still works for mutations })

❌ Never use deprecated options

// Deprecated in v5: cacheTime: 1000 // ❌ Use gcTime instead isLoading: true // ❌ Meaning changed, use isPending keepPreviousData: true // ❌ Use placeholderData instead onSuccess: () => {} // ❌ Removed from queries useErrorBoundary: true // ❌ Use throwOnError instead

❌ Never assume isLoading means "no data yet"

// v5 changed this: isLoading = isPending && isFetching // ❌ Now means "pending AND fetching" isPending = no data yet // ✅ Use this for initial load

❌ Never forget initialPageParam for infinite queries

// v5 requires this: useInfiniteQuery({ queryKey: ['projects'], queryFn: ({ pageParam }) => fetchProjects(pageParam), initialPageParam: 0, // ✅ Required in v5 getNextPageParam: (lastPage) => lastPage.nextCursor, })

❌ Never use enabled with useSuspenseQuery

// Not allowed: useSuspenseQuery({ queryKey: ['todo', id], queryFn: () => fetchTodo(id), enabled: !!id, // ❌ Not available with suspense })

// Use conditional rendering instead:

❌ Never rely on refetchOnMount: false for errored queries

// Doesn't work - errors are always stale useQuery({ queryKey: ['data'], queryFn: failingFetch, refetchOnMount: false, // ❌ Ignored when query has error })

// Use retryOnMount instead useQuery({ queryKey: ['data'], queryFn: failingFetch, refetchOnMount: false, retryOnMount: false, // ✅ Prevents refetch for errored queries retry: 0, })

Known Issues Prevention

This skill prevents 16 documented issues from v5 migration, SSR/hydration bugs, and common mistakes:

Issue #1: Object Syntax Required

Error: useQuery is not a function or type errors Source: v5 Migration Guide Why It Happens: v5 removed all function overloads, only object syntax works Prevention: Always use useQuery({ queryKey, queryFn, ...options })

Before (v4):

useQuery(['todos'], fetchTodos, { staleTime: 5000 })

After (v5):

useQuery({ queryKey: ['todos'], queryFn: fetchTodos, staleTime: 5000 })

Issue #2: Query Callbacks Removed

Error: Callbacks don't run, TypeScript errors Source: v5 Breaking Changes Why It Happens: onSuccess, onError, onSettled removed from queries (still work in mutations) Prevention: Use useEffect for side effects, or move logic to mutation callbacks

Before (v4):

useQuery({ queryKey: ['todos'], queryFn: fetchTodos, onSuccess: (data) => { console.log('Todos loaded:', data) }, })

After (v5):

const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) useEffect(() => { if (data) { console.log('Todos loaded:', data) } }, [data])

Issue #3: Status Loading → Pending

Error: UI shows wrong loading state Source: v5 Migration: isLoading renamed Why It Happens: status: 'loading' renamed to status: 'pending', isLoading meaning changed Prevention: Use isPending for initial load, isLoading for "pending AND fetching"

Before (v4):

const { data, isLoading } = useQuery(...) if (isLoading) return

After (v5):

const { data, isPending, isLoading } = useQuery(...) if (isPending) return

Issue #4: cacheTime → gcTime

Error: cacheTime is not a valid option Source: v5 Migration: gcTime Why It Happens: Renamed to better reflect "garbage collection time" Prevention: Use gcTime instead of cacheTime

Before (v4):

useQuery({ queryKey: ['todos'], queryFn: fetchTodos, cacheTime: 1000 * 60 * 60, })

After (v5):

useQuery({ queryKey: ['todos'], queryFn: fetchTodos, gcTime: 1000 * 60 * 60, })

Issue #5: useSuspenseQuery + enabled

Error: Type error, enabled option not available Source: GitHub Discussion #6206 Why It Happens: Suspense guarantees data is available, can't conditionally disable Prevention: Use conditional rendering instead of enabled option

Before (v4/incorrect):

useSuspenseQuery({ queryKey: ['todo', id], queryFn: () => fetchTodo(id), enabled: !!id, // ❌ Not allowed })

After (v5/correct):

// Conditional rendering: {id ? ( ) : (

)}

// Inside TodoComponent: function TodoComponent({ id }: { id: number }) { const { data } = useSuspenseQuery({ queryKey: ['todo', id], queryFn: () => fetchTodo(id), // No enabled option needed }) return

Issue #6: initialPageParam Required

Error: initialPageParam is required type error Source: v5 Migration: Infinite Queries Why It Happens: v4 passed undefined as first pageParam, v5 requires explicit value Prevention: Always specify initialPageParam for infinite queries

Before (v4):

useInfiniteQuery({ queryKey: ['projects'], queryFn: ({ pageParam = 0 }) => fetchProjects(pageParam), getNextPageParam: (lastPage) => lastPage.nextCursor, })

After (v5):

useInfiniteQuery({ queryKey: ['projects'], queryFn: ({ pageParam }) => fetchProjects(pageParam), initialPageParam: 0, // ✅ Required getNextPageParam: (lastPage) => lastPage.nextCursor, })

Issue #7: keepPreviousData Removed

Error: keepPreviousData is not a valid option Source: v5 Migration: placeholderData Why It Happens: Replaced with more flexible placeholderData function Prevention: Use placeholderData: keepPreviousData helper

Before (v4):

useQuery({ queryKey: ['todos', page], queryFn: () => fetchTodos(page), keepPreviousData: true, })

After (v5):

import { keepPreviousData } from '@tanstack/react-query'

useQuery({ queryKey: ['todos', page], queryFn: () => fetchTodos(page), placeholderData: keepPreviousData, })

Issue #8: TypeScript Error Type Default

Error: Type errors with error handling Source: v5 Migration: Error Types Why It Happens: v4 used unknown, v5 defaults to Error type Prevention: If throwing non-Error types, specify error type explicitly

Before (v4 - error was unknown):

const { error } = useQuery({ queryKey: ['data'], queryFn: async () => { if (Math.random() > 0.5) throw 'custom error string' return data }, }) // error: unknown

After (v5 - specify custom error type):

const { error } = useQuery({ queryKey: ['data'], queryFn: async () => { if (Math.random() > 0.5) throw 'custom error string' return data }, }) // error: string | null

// Or better: always throw Error objects const { error } = useQuery({ queryKey: ['data'], queryFn: async () => { if (Math.random() > 0.5) throw new Error('custom error') return data }, }) // error: Error | null (default)

Issue #9: Streaming Server Components Hydration Error

Error: Hydration failed because the initial UI does not match what was rendered on the server Source: GitHub Issue #9642 Affects: v5.82.0+ with streaming SSR (void prefetch pattern) Why It Happens: Race condition where hydrate() resolves synchronously but query.fetch() creates async retryer, causing isFetching/isStale mismatch between server and client Prevention: Don't conditionally render based on fetchStatus with useSuspenseQuery and streaming prefetch, OR await prefetch instead of void pattern

Before (causes hydration error):

// Server: void prefetch streamingQueryClient.prefetchQuery({ queryKey: ['data'], queryFn: getData });

// Client: conditional render on fetchStatus const { data, isFetching } = useSuspenseQuery({ queryKey: ['data'], queryFn: getData }); return <>{data &&