skills.rest
boludo00
boludo00COMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Guide TanStack Query data fetching, caching, and state management in React applications.

80|8|Updated Jan 15, 2026
Search Tags:#caching#state management#data fetching#api integration#tanstack query#react query
One-click install
npx skills add https://github.com/boludo00/bookkeep --skill tanstack-query-boludo00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/boludo00/bookkeep/tree/main/.claude/skills/tanstack-query
Command: npx skills add https://github.com/boludo00/bookkeep --skill tanstack-query-boludo00

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers understand and implement best practices for TanStack Query (formerly React Query) within the Bookkeep codebase, ensuring efficient data fetching, caching, and state management.

Core Features & Use Cases

  • Query Key Conventions: Learn how to structure query keys for optimal caching and invalidation.
  • Query & Mutation Patterns: Explore practical examples of configuring queries for different data types and implementing mutations.
  • Cache Invalidation Strategies: Understand how to effectively manage cache updates to keep your UI in sync with your data.
  • Error Handling & Workflows: Discover patterns for robust error handling and common data fetching workflows.
  • Use Case: A developer needs to implement a new feature that fetches user data. They can consult this Skill to learn the correct way to define the query key, set staleTime, and handle potential errors, ensuring the feature is performant and maintainable.

Quick Start

Use the tanstack-query skill to learn about query key conventions for caching data.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I structure TanStack Query keys for optimal caching and invalidation?▼

TanStack Query keys should be structured as hierarchical arrays to optimize caching and enable precise invalidation. Consistent key conventions allow targeted cache updates and keep your UI synchronized with server data.

What is the best way to handle errors during data fetching in React applications?▼

Error handling in React data fetching requires robust workflows to manage API failures gracefully. Implementing structured error boundaries within your query configurations ensures maintainable and resilient UI updates.

How do I update the cache after a mutation in React Query?▼

Cache invalidation strategies update your React Query cache automatically after mutations. By configuring query invalidation rules, you ensure the UI reflects the latest data without needing manual refetching.

How do I configure staleTime for fetching user data with TanStack Query?▼

Configuring staleTime for user data fetching controls how long TanStack Query considers cached data fresh before refetching. Setting this property correctly optimizes performance and reduces unnecessary API requests.

Does this Skill provide examples of query and mutation patterns for React applications?▼

Yes, it provides practical examples of configuring queries and implementing mutations directly from a real codebase. These patterns demonstrate how to handle various data types and common fetching workflows efficiently.

When do I need to use cache invalidation strategies for state management?▼

Cache invalidation strategies are needed for state management when your UI must reflect server-side updates immediately. They are essential after mutations to prevent stale data and maintain application consistency.

Related Skills

Explore More Software Engineering Skills→
tenequmtenequm
32

tanstack

Build type-safe React applications with TanStack Query, Router, and Start.

Community
Advanced
sbsbhongsbsbhong

zustand

Adapt Zustand state management to json-render's StateStore for React Native JSON UI components.

Community
Intermediate
FujishigeTemmaFujishigeTemma

async-react-best-practices

Implement React 19 async features with TanStack Router and Query.

Community
Advanced
kaiomaced0kaiomaced0

tanstack-query

Fetch, cache, and update data with TanStack Query hooks.

Community
Intermediate