skills.rest
0r0loo
0r0looCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Manage server state with TanStack Query using useQuery and useMutation.

Updated Feb 10, 2026
Search Tags:#caching#state management#data fetching#tanstack query#server state#react query
One-click install
npx skills add https://github.com/0r0loo/my-claude-code-toolkit --skill tanstack-query-0r0loo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/0r0loo/my-claude-code-toolkit/tree/main/.claude/skills/TanStackQuery
Command: npx skills add https://github.com/0r0loo/my-claude-code-toolkit --skill tanstack-query-0r0loo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for managing server state effectively using TanStack Query, ensuring efficient data fetching, caching, and synchronization in your applications.

Core Features & Use Cases

  • Server State Management: Guides on using useQuery and useMutation for fetching and updating server data.
  • Data Conventions: Establishes conventions for queryKey naming and the queryKey factory pattern for better organization and invalidation.
  • Advanced Patterns: Covers Optimistic Updates, Prefetching, and Suspense mode for enhanced user experience.
  • Configuration: Recommends optimal staleTime, gcTime, and other QueryClient options.
  • Use Case: When implementing a feature that displays a list of users and allows for user creation, this Skill will guide you on how to fetch the user list, handle the creation mutation, and ensure the list is updated correctly afterward, all while optimizing for performance and user experience.

Quick Start

Refer to the TanStack Query Skill for rules on using useQuery with queryKey factories.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
What's the best way to manage server state in React applications?▼

Server state in React is best managed using TanStack Query to fetch, cache, and synchronize data. It provides rules for `useQuery` and `useMutation` to handle data fetching efficiently while optimizing application performance.

How do I structure queryKey conventions for data invalidation?▼

Structure queryKey conventions using the queryKey factory pattern for better organization and invalidation. This approach ensures consistent naming and allows targeted cache invalidation after operations like data mutations.

How do I implement optimistic updates with useMutation?▼

Implement optimistic updates with `useMutation` by immediately reflecting changes in the UI before the server responds. This advanced pattern enhances user experience during data creation and updates while ensuring synchronization.

How do I configure QueryClient cache strategies like staleTime and gcTime?▼

Configure `QueryClient` cache strategies by setting optimal `staleTime` and `gcTime` values. These options determine how long fetched data remains fresh and when inactive cache data gets garbage collected.

Can I use TanStack Query with Suspense mode in React?▼

Yes, TanStack Query supports Suspense mode in React applications. This integration allows you to handle loading states declaratively, enhancing the user experience while fetching server state data.

Related Skills

Explore More Software Engineering Skills→
pascallammerspascallammers
1

research-tanstack-query

Explains TanStack Query patterns for data fetching and caching in Next.js.

Community
Intermediate
PheonixCodderPheonixCodder

cache-components

Implement and optimize Next.js Cache Components with Partial Prerendering.

Community
Advanced
aarsh21aarsh21
1

tanstack-query-best-practices

Codify TanStack Query best practices for React data fetching and caching.

Community
Advanced
tenequmtenequm
32

tanstack-query

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

Community
Advanced