tanstack-querylisted

# TanStack Query Patterns ## Purpose Modern data fetching with TanStack Query v5 (latest: 5.90.5, November 2025), emphasizing Suspense-based queries, cache-first strategies, and centralized API services. **Note**: v5 (released October 2023) has breaking changes from v4: - `isLoading` → `isPending` for status - `cacheTime` → `gcTime` (garbage collection time) - React 18.0+ required - Callbacks removed from useQuery (onError, onSuccess, onSettled) - `keepPreviousData` replaced with `placeholderData` function ## When to Use This Skill - Fetching data with TanStack Query - Using useSuspenseQuery or useQuery - Managing mutations - Cache invalidation and updates - API service patterns --- ## Quick Start ### Primary Pattern: useSuspenseQuery For **all new components**, use `useSuspenseQuery`: ```typescript import { useSuspenseQuery } from '@tanstack/react-query'; import { postsApi } from '~/features/posts/api/postsApi'; function PostList() { const { data: posts } = useSuspenseQuery({ queryKey: ['posts'], queryFn: postsApi.getAll, }); return ( <div> {posts.map(post => ( <PostCard key={post.id} post={post} /> ))} </div> ); } // Wrap with Suspense <Suspense fallback={<PostsSkeleton />}> <PostList /> </Suspense> ``` **Benefits:** - No `isLoading` checks needed - Integrates with Suspense boundaries - Cleaner component code - Consistent loading UX --- ## useSuspenseQuery Patterns ### Basic Usage ```typescript const { data } =