tanstack-query

Manage server state and data fetching for TypeScript and JavaScript front-end frameworks.

6|4|Updated Nov 1, 2025
One-click install
npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-query-montte-erp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/Montte-erp/montte-nx/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-query-montte-erp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query centralizes and automates server-state management so applications can fetch, cache, synchronize, and update remote data reliably without repetitive boilerplate.

Core Features & Use Cases

  • Automatic Caching & Background Refetching: Keeps UI data fresh with configurable stale and garbage collection times.
  • Pagination, Infinite Scroll & Parallel Queries: Simplifies complex list and multi-request patterns with helpers for pagination and parallel fetching.
  • Optimistic Updates & Robust Error Handling: Enables fast UI updates with rollback support and lifecycle callbacks for mutations.
  • Use Case: Build a React dashboard that prefetches lists, shows live analytics, supports optimistic edits, and hydrates server-rendered state for fast initial loads.

Quick Start

Initialize a QueryClient with sensible defaults and wrap your application in a QueryClientProvider to enable caching, refetching, and devtools.

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 and data fetching in React without writing repetitive boilerplate?

TanStack Query centralizes server-state management to automatically fetch, cache, and synchronize remote data. It eliminates repetitive boilerplate by handling background refetching and configurable stale times for JavaScript applications.

Does TanStack Query work with Vue, Solid, Svelte, and Angular for caching and background refetching?

Yes, TanStack Query supports TypeScript and JavaScript front-end frameworks including React, Vue, Solid, Svelte, and Angular. It provides automatic caching and background refetching across these environments using configurable stale and garbage collection times.

How do I implement optimistic updates with rollback support for mutations?

Optimistic updates enable fast UI responses by applying changes immediately before server confirmation. TanStack Query provides lifecycle callbacks for mutations, supporting automatic rollback to previous state if the server request fails.

What is the best way to handle cache hydration and dehydration for server-side rendering (SSR)?

Cache hydration and dehydration for SSR is handled via serializable hierarchical query keys. TanStack Query manages server-state dehydration on the server and hydration on the client to enable fast initial loads for server-rendered applications.

How do I configure pagination and infinite scrolling for large lists in a JavaScript front-end?

Pagination and infinite scrolling are simplified using TanStack Query's built-in helpers. These helpers manage complex list patterns and parallel fetching, keeping cached UI data fresh while navigating across paginated results.

Can I abort active fetches and configure retry policies for network requests?

Yes, TanStack Query supports abortable fetches via AbortSignal and provides configurable retry and refetch policies. It also includes query invalidation APIs to precisely control when cached data is marked stale and refetched.