skills.rest
zinohome
zinohomeCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query-setup

Implements TanStack Query for server state management with caching, mutations, and infinite queries.

Updated Mar 16, 2026
Search Tags:#caching#data fetching#next.js#tanstack query#mutations#optimistic updates#react query
One-click install
npx skills add https://github.com/zinohome/RTMessage --skill tanstack-query-setup-zinohome
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-setup
Source: https://github.com/zinohome/RTMessage/tree/main/.github/skills/tanstack-query-setup
Command: npx skills add https://github.com/zinohome/RTMessage --skill tanstack-query-setup-zinohome

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, loading states, and synchronization manually, which leads to duplicated boilerplate and stale data bugs. ## Core Features & Use Cases - Query Management: Create typed queries with structured query keys, filters, dependent queries, and parallel fetching via useQueries. - Mutations with Optimistic Updates: Handle create, update, and delete operations with cache invalidation, rollback on error, and instant UI feedback. - Infinite Queries & SSR: Implement cursor or offset-based pagination with intersection observers, plus server-side prefetching and hydration for Next.js App Router. - Use Case: A developer building a Next.js dashboard needs to fetch paginated product lists, update records with instant UI feedback, and keep caches synchronized across components without writing custom state logic. ## Quick Start Set up TanStack Query in my Next.js app with a QueryClient provider, a users query hook, and a mutation with optimistic updates.

Frequently Asked Questions about tanstack-query-setup

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

FAQPage Schema
How do I set up TanStack Query in a Next.js app?▼

Install @tanstack/react-query and create a client component that instantiates QueryClient with default options like staleTime and retry. Wrap your root layout with QueryClientProvider and optionally add ReactQueryDevtools for debugging.

How do I implement optimistic updates with React Query mutations?▼

Use the onMutate callback to cancel outgoing queries, snapshot the previous cache with getQueryData, and apply the new value with setQueryData. Return the snapshot as context so onError can roll back, and invalidate queries in onSettled.

Does TanStack Query support server-side rendering in Next.js?▼

Yes, TanStack Query supports SSR through prefetchQuery in server components combined with dehydrate and HydrationBoundary. The prefetched cache is serialized on the server and hydrated on the client without refetching.

How do I build infinite scroll with useInfiniteQuery?▼

Use useInfiniteQuery with initialPageParam and getNextPageParam to define cursor or offset pagination. Combine fetchNextPage with an IntersectionObserver on a sentinel element to load the next page when it enters the viewport.

Why is my React Query data stale after a mutation?▼

Data stays stale when the mutation does not invalidate the related query keys. Call queryClient.invalidateQueries with the matching queryKey in onSuccess, or use setQueryData to update the cache directly with the server response.

Related Skills

Explore More Software Engineering Skills→
ejwhite7ejwhite7

beehiiv-react

Integrate the beehiiv API into Next.js applications for newsletter and subscriber management.

Community
Advanced
davila7davila7
30.5k

react-ui-patterns

Implements React UI patterns for loading states, error handling, and data fetching.

Community
Intermediate
michsindlingermichsindlinger
1

State Management

Implements scalable state management patterns for React, Vue, and Angular applications.

Community
Advanced
mgd34msumgd34msu
4

redux-toolkit

Manage React global state with Redux Toolkit slices and async thunks.

Community
Intermediate