skills.rest
janpeterd
janpeterdCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Manage asynchronous server-state data with caching and background refetching.

Updated Jul 2, 2025
Search Tags:#caching#react#data fetching#pagination#optimistic updates#server-state#query invalidation
One-click install
npx skills add https://github.com/janpeterd/dotfiles --skill tanstack-query-janpeterd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/janpeterd/dotfiles/tree/main/dot_agents/skills/tanstack-query
Command: npx skills add https://github.com/janpeterd/dotfiles --skill tanstack-query-janpeterd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query solves the challenge of fetching, caching, synchronizing, and updating server state in TS/JS apps so your UI stays responsive and consistent.

Core Features & Use Cases

  • Query Keys & Invalidation: Organizes cached data with hierarchical, serializable query keys and invalidates by prefix for predictable refresh behavior (e.g., invalidate all "todos" queries after a change).
  • Data Fetching Patterns: Covers queries, mutations, infinite scrolling, pagination, dependent queries, and parallel queries for common client-side server-data workflows.
  • Performance & UX Controls: Provides staleTime, gcTime, retry, refetching rules, optimistic updates, and Suspense integration to reduce loading states and race conditions.

Quick Start

Use the tanstack-query setup guide to add QueryClientProvider to your React app, then create a useQuery call with a stable queryKey and a queryFn that fetches your server data.

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 logic?▼

Server-state caching in React is managed by defining a stable queryKey and queryFn, which handles background refetching and synchronization automatically. This ensures your UI stays responsive and consistent without manual cache orchestration.

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

Optimistic updates are implemented by using mutations to immediately update the UI while configuring rollback logic for affected cached queries. This allows safe rollback if the server request fails, keeping the application consistent.

Does TanStack Query work with Vue, Solid, and other TS/JS frameworks?▼

TanStack Query supports Vue, Solid, Svelte, Angular, and related TS/JS scenarios for asynchronous server-state data management. It applies caching, pagination, and synchronization patterns across these frontend frameworks.

What's the best way to invalidate cached queries after a data mutation?▼

Cached queries are invalidated by using hierarchical, serializable query keys and invalidating by prefix. This provides predictable refresh behavior, such as invalidating all queries matching a specific prefix after a data change.

How do I handle pagination and infinite scrolling for data fetching?▼

Pagination and infinite scrolling are handled through built-in data fetching patterns for queries. These patterns manage background refetching and synchronization to reduce loading states and race conditions during data navigation.

How do I configure staleness and garbage collection for cached data?▼

Staleness and garbage collection are configured using staleTime and gcTime settings. These performance controls determine when cached data is considered stale and when it should be removed, reducing unnecessary refetching.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

react/compose-with-tanstack-query

Implement server-side pagination for TanStack Table v9 with TanStack Query.

Official
Advanced
PatternsDevPatternsDev
235

react-data-fetching

Coordinate React data fetching with caching, parallel requests, and optimistic updates.

Official
Advanced
rezicsrezics
6

tanstack-query

Manage server-state data with caching and synchronization across client applications.

Official
Advanced
tenequmtenequm
32

tanstack-query

Manage React server-state with TanStack Query queries, mutations, and caching.

Community
Advanced