tanstack-query

Manage server-state fetching, caching, and synchronization in React and TypeScript applications.

Updated Aug 27, 2026

Search Tags:#caching #react #tanstack query #server state #optimistic updates #invalidation #ssr hydration

Ready to run

npx skills add https://github.com/MichaelFrieze/riffatlas --skill tanstack-query-michaelfrieze

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/MichaelFrieze/riffatlas/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/MichaelFrieze/riffatlas --skill tanstack-query-michaelfrieze

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query solves the problem of manually managing server-state fetching, caching, and synchronization in web apps so your UI stays responsive and up to date.

Core Features & Use Cases

Server-state fetching & caching: Automatically caches query results and keeps data fresh with stale-while-revalidate patterns.
Automatic refetching & invalidation: Refetches on mount, focus, reconnect, or explicit invalidation to keep views consistent.
Mutations with optimistic updates: Updates the UI immediately and rolls back safely when server requests fail.
Pagination & infinite scrolling: Supports paged data and cursor-based infinite lists for feed-like experiences.
SSR, hydration, and prefetching: Enables server-side prefetch and client hydration to reduce loading time and flicker.

Quick Start

Use the tanstack-query skill to configure React Query v5 in your app, then write query keys and query functions that fetch your server data with caching and automatic refetch behavior.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema

How do I manage server-state caching in React without writing custom fetch logic?▼

Server-state caching in React is handled by configuring query keys and query functions to automatically cache results and apply stale-while-revalidate patterns. The framework handles refetching on mount, focus, and reconnect to keep data fresh.

How do I implement optimistic updates for mutations in a React application?▼

Optimistic updates in React are implemented by defining mutation functions that immediately update the UI before the server responds. If the request fails, the framework automatically rolls back the UI to its previous safe state.

What is the best way to handle paginated and infinite scrolling data in React?▼

Paginated and infinite scrolling data in React is best handled by configuring cursor-based infinite queries and paged data loading. This approach supports feed-like experiences by automatically fetching and caching sequential data.

Does TanStack Query support SSR hydration and prefetching in React?▼

Yes, TanStack Query supports SSR hydration and prefetching in React. It enables server-side prefetching and client hydration to reduce loading time and prevent UI flicker by defining hydration boundaries.

How do I configure cache invalidation and refetch policies in React Query?▼

Cache invalidation and refetch policies in React Query are configured using staleTime and gcTime parameters alongside invalidation APIs. This ensures views stay consistent by automatically refetching data when it becomes stale or when explicitly invalidated.

Can I use React Query with Suspense for data fetching?▼

Yes, React Query integrates with Suspense for data fetching. By configuring Suspense boundaries in your React application, query functions will automatically suspend component rendering while waiting for server-state data to load.