pitfalls-tanstack-query
TanStack Query v5 patterns and common pitfalls. Use when implementing data fetching, cache invalidation, or debugging stale data issues. Triggers on: useQuery, useMutation, queryKey, invalidate, TanStack, React Query.
Best use case
pitfalls-tanstack-query is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. TanStack Query v5 patterns and common pitfalls. Use when implementing data fetching, cache invalidation, or debugging stale data issues. Triggers on: useQuery, useMutation, queryKey, invalidate, TanStack, React Query.
TanStack Query v5 patterns and common pitfalls. Use when implementing data fetching, cache invalidation, or debugging stale data issues. Triggers on: useQuery, useMutation, queryKey, invalidate, TanStack, React Query.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "pitfalls-tanstack-query" skill to help with this workflow task. Context: TanStack Query v5 patterns and common pitfalls. Use when implementing data fetching, cache invalidation, or debugging stale data issues. Triggers on: useQuery, useMutation, queryKey, invalidate, TanStack, React Query.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pitfalls-tanstack-query/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pitfalls-tanstack-query Compares
| Feature / Agent | pitfalls-tanstack-query | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
TanStack Query v5 patterns and common pitfalls. Use when implementing data fetching, cache invalidation, or debugging stale data issues. Triggers on: useQuery, useMutation, queryKey, invalidate, TanStack, React Query.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# TanStack Query v5 Pitfalls
Common pitfalls and correct patterns for TanStack Query v5.
## When to Use
- Implementing data fetching with useQuery
- Setting up mutations with useMutation
- Debugging stale data or cache issues
- Reviewing code that uses TanStack Query
- Migrating from v4 to v5
## Workflow
### Step 1: Check Query Keys
Verify query keys use full URL paths for proper deduplication.
### Step 2: Verify Invalidation
Ensure mutations invalidate relevant queries on success.
### Step 3: Check v5 Patterns
Verify v5-specific patterns (isPending vs isLoading).
---
## Correct Usage
```typescript
// ✅ CORRECT: Full URL path in queryKey
const { data } = useQuery({
queryKey: ['/api/strategies', strategyId],
queryFn: () => api.get(`/api/strategies/${strategyId}`),
});
// ✅ CORRECT: Invalidate after mutation
const mutation = useMutation({
mutationFn: (data) => api.post('/api/strategies', data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['strategies'] });
},
});
// ✅ CORRECT: Type responses with schema types
import type { Strategy } from '@shared/schema';
const { data } = useQuery<{ data: Strategy[] }>(...);
```
## Anti-Patterns
```typescript
// ❌ WRONG: Short queryKey
queryKey: ['strategy'] // Won't dedupe properly
// ❌ WRONG: Forgetting to invalidate
onSuccess: () => { navigate('/'); } // Stale cache!
// ❌ WRONG: Using isLoading for mutations
mutation.isLoading // Use isPending in v5
```
## Optimistic Updates
```typescript
// ✅ Update UI immediately, rollback on error
const mutation = useMutation({
mutationFn: updateStrategy,
onMutate: async (newData) => {
await queryClient.cancelQueries({ queryKey: ['strategy', id] });
const previous = queryClient.getQueryData(['strategy', id]);
// Optimistic update
queryClient.setQueryData(['strategy', id], newData);
return { previous };
},
onError: (err, newData, context) => {
// Rollback on error
queryClient.setQueryData(['strategy', id], context.previous);
toast.error('Update failed');
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['strategy', id] });
},
});
```
## Quick Checklist
- [ ] QueryKeys use full URL paths
- [ ] Mutations invalidate relevant queries
- [ ] Using isPending (not isLoading) for mutations in v5
- [ ] Responses typed with schema typesRelated Skills
looker-studio-bigquery
Design and configure Looker Studio dashboards with BigQuery data sources. Use when creating analytics dashboards, connecting BigQuery to visualization tools, or optimizing data pipeline performance. Handles BigQuery connections, custom SQL queries, scheduled queries, dashboard design, and performance optimization.
azure-monitor-query-py
Azure Monitor Query SDK for Python. Use for querying Log Analytics workspaces and Azure Monitor metrics. Triggers: "azure-monitor-query", "LogsQueryClient", "MetricsQueryClient", "Log Analytics", "Kusto queries", "Azure metrics".
azure-monitor-query-java
Azure Monitor Query SDK for Java. Execute Kusto queries against Log Analytics workspaces and query metrics from Azure resources. Triggers: "LogsQueryClient java", "MetricsQueryClient java", "kusto query java", "log analytics java", "azure monitor query java". Note: This package is deprecated. Migrate to azure-monitor-query-logs and azure-monitor-query-metrics.
tanstack-query
Manage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
datafusion-query-advisor
Reviews SQL queries and DataFrame operations for optimization opportunities including predicate pushdown, partition pruning, column projection, and join ordering. Activates when users write DataFusion queries or experience slow query performance.
tanstack-integration
Find opportunities to improve web application code using TanStack libraries (Query, Table, Form, Router, etc.). Avoid man-with-hammer syndrome by applying TanStack after vanilla implementation works.
query-optimizer
Analyze and optimize SQL queries for better performance and efficiency.
query-builder
Interactive database query builder for generating optimized SQL and NoSQL queries.
querying-logseq-data
Expert in building Datalog queries for Logseq DB graphs. Auto-invokes when users need help writing Logseq queries, understanding Datalog syntax, optimizing query performance, or working with the Datascript query engine. Covers advanced query patterns, pull syntax, aggregations, and DB-specific query techniques.
bigquery
Comprehensive guide for using BigQuery CLI (bq) to query and inspect tables in Monzo's BigQuery projects, with emphasis on data sensitivity and INFORMATION_SCHEMA queries.
pitfalls-websocket
WebSocket server and client patterns with heartbeat and reconnection. Use when implementing real-time features, debugging connection issues, or reviewing WebSocket code. Triggers on: WebSocket, wss, heartbeat, reconnect, real-time.
pitfalls-security
Security patterns for session keys, caching, logging, and environment variables. Use when implementing authentication, caching sensitive data, or setting up logging. Triggers on: session key, private key, cache, logging, secrets, environment variable.