skills.rest
blockmatic-icebox
blockmatic-iceboxOFFICIAL
Explore all skills by this author →
GitHub

tanstack-query

Manage async data fetching, caching, and mutation state in React apps.

4|1|Updated Aug 15, 2024
Search Tags:#caching#tanstack#async#mutations#react-query#data-fetching
One-click install
npx skills add https://github.com/blockmatic-icebox/basilic-old --skill tanstack-query-blockmatic-icebox
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/blockmatic-icebox/basilic-old/tree/main/.cursor/skills/tanstack-query-v5
Command: npx skills add https://github.com/blockmatic-icebox/basilic-old --skill tanstack-query-blockmatic-icebox

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query provides a unified, reliable way to handle asynchronous data in React by offering caching, background updates, and consistent mutation flows, eliminating boilerplate and UI flicker.

Core Features & Use Cases

  • Data fetching with automatic caching and stale-while-revalidate behavior
  • Mutations with automatic invalidation and optimistic updates
  • Infinite queries and pagination support
  • Generates API client integrations with OpenAPI specs for typed hooks

Quick Start

Install TanStack Query in your React project and start wiring up typed, cached queries with ready-made hooks.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I manage async data fetching and caching in React without UI flicker?▼

TanStack Query provides a unified way to handle async data fetching and caching in React using stale-while-revalidate behavior, eliminating UI flicker. It automatically caches server data and updates it in the background.

What's the best way to handle mutations and automatic cache invalidation in React?▼

Handle mutations in React with TanStack Query by leveraging automatic cache invalidation and optimistic updates. It ensures consistent mutation flows and automatically refreshes affected queries using namespace invalidation patterns.

How do I implement infinite queries and pagination for server data requests?▼

Implement infinite queries and pagination in React using TanStack Query's built-in support. It manages background refetching and caching for paginated server data requests, reducing boilerplate for loading states.

Does TanStack Query work with OpenAPI specs for typed hooks?▼

TanStack Query generates API client integrations with OpenAPI specs to produce typed hooks. This allows you to wire up cached queries with ready-made, strongly typed hooks for server data requests.

When do I need query key factories for React data fetching?▼

Use query key factories when managing complex cached data fetching in React to organize query keys systematically. TanStack Query meets this requirement to enable precise namespace invalidation patterns during mutations.

Related Skills

Explore More Software Engineering Skills→
zerobias-orgzerobias-org

spectral-linting

Lint OpenAPI specs with Spectral using a .spectral.yml configuration.

Official
Intermediate
Yoriichi-DangYoriichi-Dang

tanstack-query-best-practices

Structure TanStack Query data fetching, caching, and server state in React applications.

Community
Advanced
imehrimehr

state-management

Structure React state management across server and client boundaries with modular patterns.

Community
Intermediate
nklischnklisch
7

tanstack-query-v5

Reference TanStack Query v5 hooks for React server state management.

Community
Basic