tanstack-query

TanStack Query (React Query) for data fetching and caching.

Installation

npx claude-plugins install @jezweb/claude-skills/tanstack-query

Contents

Folders: assets, references, rules, scripts, templates

Files: README.md, SKILL.md

Documentation

Status: ✅ Production Ready Last Updated: 2025-10-22 Production Tested: Patterns verified with TypeScript strict mode

Auto-Trigger Keywords

Claude Code automatically discovers this skill when you mention:

Primary Keywords

• TanStack Query
• React Query
• useQuery
• useMutation
• useInfiniteQuery
• useSuspenseQuery
• QueryClient
• QueryClientProvider

Secondary Keywords

• data fetching
• server state
• caching
• staleTime
• gcTime
• query invalidation
• prefetching
• optimistic updates
• mutations
• query keys
• query functions
• error boundaries
• suspense queries
• React Query DevTools
• v5 migration
• v4 to v5

Error-Based Keywords

• “query callbacks removed”
• “cacheTime not found”
• “loading status”
• “initialPageParam required”
• “useQuery is not a function”
• “keepPreviousData removed”
• “onSuccess removed”
• “onError removed”
• “object syntax required”
• “enabled not available with suspense”
• “placeholderData”
• “isPending vs isLoading”

What This Skill Does

Provides comprehensive knowledge for TanStack Query v5 (React Query) server state management in React applications, including setup, queries, mutations, caching strategies, v4→v5 migration, optimistic updates, infinite queries, and error handling.

Core Capabilities

✅ QueryClient configuration and setup ✅ useQuery, useMutation, useInfiniteQuery patterns ✅ Optimistic updates and cache management ✅ v4 to v5 migration (all breaking changes) ✅ TypeScript patterns and type safety ✅ Error handling strategies ✅ Caching and refetching strategies ✅ DevTools setup and debugging ✅ Testing patterns with MSW

Known Issues This Skill Prevents

When to Use This Skill

✅ Use When:

• Setting up TanStack Query in React app
• Implementing data fetching with useQuery
• Creating mutations with useMutation
• Configuring QueryClient settings
• Migrating from React Query v4 to v5
• Implementing optimistic updates
• Setting up infinite scroll with useInfiniteQuery
• Debugging caching or refetching issues
• Resolving v5 breaking changes
• Implementing suspense queries
• Setting up React Query DevTools
• Writing tests for components using TanStack Query

❌ Don’t Use When:

• Managing local UI state (use useState)
• Global client state like theme (use Context/Zustand)
• Simple static data (no need for query library)
• Server-side data fetching (Next.js App Router, Remix)

Quick Usage Example

# Install dependencies
npm install @tanstack/react-query@latest
npm install -D @tanstack/react-query-devtools@latest

# Set up QueryClient Provider (see SKILL.md for complete setup)

Result: Full TanStack Query v5 setup with best practices

Full instructions: See SKILL.md

Token Efficiency Metrics

…(truncated)

Source

View on GitHub