tanstack-query-best-practices

Name: tanstack-query-best-practices
Availability: InStock
Author: temma

Guide TanStack Query v5 code with queryOptions factories and invalidation strategies.

Updated Jan 25, 2026

Search Tags:#typescript #best practices #caching #state management #data fetching #tanstack query #react query

Ready to run

npx skills add https://github.com/FujishigeTemma/listen --skill tanstack-query-best-practices-fujishigetemma

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/FujishigeTemma/listen/tree/main/.claude/skills/tanstack-query-best-practices
Command: npx skills add https://github.com/FujishigeTemma/listen --skill tanstack-query-best-practices-fujishigetemma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to writing robust, maintainable, and performant TanStack Query (React Query) code, addressing common pitfalls and promoting best practices.

Core Features & Use Cases

Optimized Query Definitions: Learn to use queryOptions for better type safety and reusability.
Effective Invalidation: Master strategies for keeping your cache up-to-date with mutations.
Error Handling & Resilience: Implement robust error handling and optimistic updates.
TypeScript Integration: Leverage TypeScript inference for type safety.
Use Case: Refactor existing React Query code to use queryOptions factories, ensuring all queries are properly typed, invalidated, and handle errors gracefully, leading to a more stable and predictable application state.

Quick Start

Use the tanstack-query-best-practices skill to refactor the apps/web/client/src/lib/queries.ts file to use queryOptions-based factories.

Frequently Asked Questions about tanstack-query-best-practices

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

FAQPage Schema

How do I use queryOptions to create reusable TanStack Query definitions?▼

Yes, queryOptions improves TypeScript type inference by centralizing your query key and query function. This pattern ensures strongly typed data fetching logic and promotes consistent query definitions across your application components.

What's the best way to handle cache invalidation with useMutation in React Query?▼

Handle cache invalidation by employing targeted query key factory strategies within your useMutation onSuccess callbacks. This approach keeps your cache up-to-date efficiently after mutations without over-fetching unrelated data.

How do I implement optimistic updates with TanStack Query v5?▼

Implement optimistic updates in TanStack Query v5 by leveraging the onMutate lifecycle hook to update the cache immediately. You then roll back changes automatically in onError if the mutation fails, ensuring resilient UI feedback.

Does TanStack Query work well with TypeScript for automatic type inference?▼

Yes, TanStack Query integrates well with TypeScript by providing automatic type inference for query data and mutation variables. Using queryOptions factories maximizes this integration for robust, type-safe asynchronous state management.

Why should I refactor my React Query code to use query key factories?▼

Refactoring React Query code to use query key factories prevents invalidation bugs by structuring cache keys hierarchically. This architectural pattern makes cache management predictable and simplifies complex data fetching scenarios.