skills.rest
asubota
asubotaCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Manage server-state with caching, refetching, and mutations across TS/JS frameworks.

Updated May 10, 2024
Search Tags:#typescript#react#queries#cache#data-fetching#server-state
One-click install
npx skills add https://github.com/asubota/lets --skill tanstack-query-asubota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/asubota/lets/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/asubota/lets --skill tanstack-query-asubota

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Server-state management for client applications is complex due to data fetching, caching, synchronization, and stale data. TanStack Query provides a robust abstraction to handle server state with automatic caching, background updates, and seamless invalidation across frameworks.

Core Features & Use Cases

  • Automatic caching and background refetching for fresh data
  • Flexible query keys, invalidation, and structural sharing for scalable UIs
  • Mutations with optimistic updates and robust error handling
  • Cross-framework support (React, Vue, Solid, Svelte, Angular) for a consistent data layer

Quick Start

Install @tanstack/react-query and wrap your app with a QueryClientProvider to enable server-state caching.

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 cache data fetching in React?▼

You manage server state by installing the data-fetching library and wrapping your application with a QueryClientProvider. This setup provides automatic caching, background refetching, and seamless invalidation for your UI components.

What is the best way to handle stale data and cache invalidation in TypeScript apps?▼

Cache invalidation in TypeScript apps uses flexible query keys to tag and invalidate specific data. Structural sharing and automatic background refetching ensure your UI stays scalable and synchronized without displaying stale data.

Can I use TanStack Query for data fetching in Vue, Solid, Svelte, or Angular?▼

Yes, TanStack Query supports cross-framework data fetching across React, Vue, Solid, Svelte, and Angular projects. It provides a consistent server-state data layer for caching, mutations, and invalidation across these frameworks.

How do I implement optimistic updates and mutations for server data?▼

Implement mutations with optimistic updates by applying UI changes immediately before the server responds. Robust error handling automatically rolls back the UI state if the mutation request fails, ensuring data consistency.

Does server state management work with React Suspense integration?▼

Yes, server state management supports Suspense integration for asynchronous data fetching. This allows components to suspend rendering until cached queries resolve, streamlining loading states across your application.

Related Skills

Explore More Software Engineering Skills→
digital-stoic-orgdigital-stoic-org
19

install-dependency

Automate monorepo-aware dependency installation across Python, JavaScript, and system packages.

Official
Intermediate
GoBeromsuGoBeromsu
2

browser-testing-with-devtools

Inspect DOM, console, network, and performance in real browsers via Chrome DevTools MCP.

Community
Intermediate
iEnergyyiEnergyy

tanstack-query

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

Community
Advanced
mizchimizchi
320

frontend-review-state

Classify frontend state management patterns and detect anti-patterns without modifying code.

Community
Advanced