skills.rest
yehezkieldio
yehezkieldioCOMMUNITY
Explore all skills by this author →
𝕏@yhezkieldioGitHub

tanstack-query

Implement server-state caching, fetching, and mutations with TanStack Query v5.

Updated Aug 15, 2025
Search Tags:#caching#react#data fetching#tanstack query#mutations#server state#react query
One-click install
npx skills add https://github.com/yehezkieldio/topaz --skill tanstack-query-yehezkieldio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/yehezkieldio/topaz/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/yehezkieldio/topaz --skill tanstack-query-yehezkieldio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, @tanstack/react-query-devtools.

What problem does it solve? Managing server state in React applications requires handling caching, background refetching, pagination, and synchronization manually, which leads to duplicated logic and stale data bugs. ## Core Features & Use Cases - Declarative Data Fetching: Use useQuery with hierarchical query keys for automatic caching, deduplication, and stale-while-revalidate behavior. - Mutations & Optimistic Updates: Apply useMutation with onMutate snapshots, rollback on error, and query invalidation to keep UI and server in sync. - Advanced Patterns: Infinite queries, dependent queries, prefetching, Suspense integration, and SSR hydration via dehydrate/HydrationBoundary. - Use Case: Build a paginated todo list where page changes keep previous data visible via placeholderData, and adding an item optimistically updates the cache before the server responds. ## Quick Start Set up a QueryClientProvider with a configured QueryClient and fetch data in a component using useQuery with a query key and query function.

Frequently Asked Questions about tanstack-query

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fetch and cache API data in React with TanStack Query?▼

Wrap your app in QueryClientProvider with a QueryClient, then call useQuery with a serializable queryKey array and a queryFn that returns a promise. TanStack Query handles caching, background refetching, and stale-while-revalidate automatically.

How do I do optimistic updates with useMutation?▼

In onMutate, cancel outgoing queries with cancelQueries, snapshot the current cache via getQueryData, then setQueryData with the new value. On error, restore the snapshot; on settled, invalidate the query to resync with the server.

Does TanStack Query support infinite scrolling and pagination?▼

Yes. useInfiniteQuery handles cursor-based infinite lists with getNextPageParam and fetchNextPage, while regular useQuery with placeholderData keeps previous page data visible during pagination transitions.

What is the difference between staleTime and gcTime in TanStack Query?▼

staleTime controls how long data is considered fresh before refetching, while gcTime controls how long unused data stays in cache before garbage collection. Setting staleTime higher than gcTime can cause fresh data to be collected.

Can I use TanStack Query with Next.js server-side rendering?▼

Yes. Prefetch queries on the server with a QueryClient, pass dehydrate(queryClient) to the client, and wrap components in HydrationBoundary. This works with both classic SSR and React Server Components streaming.

Related Skills

Explore More Software Engineering Skills→
masonjamesmasonjames

trpc-patterns

Implement typed TRPC data fetching with TanStack Query patterns in TSX files.

Community
Intermediate
przbaduprzbadu
1

react-ui-patterns

Standardize loading, empty, and error states in React components.

Community
Intermediate
AbdullahmohammadarefAbdullahmohammadaref

react-ui-patterns

Standardize loading, error, and optimistic UI state handling in React components.

Community
Intermediate
trycompaitrycompai
1.9k

data

Implements server-to-client data fetching with SWR hooks in Next.js applications.

Official
Intermediate