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.
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.
Teams using pitfalls-tanstack-query should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
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
clay-known-pitfalls
Identify and avoid the top Clay anti-patterns, gotchas, and integration mistakes. Use when reviewing Clay integrations for issues, onboarding new team members, or auditing existing Clay table configurations. Trigger with phrases like "clay mistakes", "clay anti-patterns", "clay pitfalls", "clay what not to do", "clay gotchas", "clay code review".
clade-known-pitfalls
Common mistakes when building with the Anthropic API and how to avoid them. Use when working with known-pitfalls patterns. Trigger with "anthropic mistakes", "claude pitfalls", "anthropic gotchas", "common claude errors", "anthropic anti-patterns".
canva-known-pitfalls
Identify and avoid Canva Connect API anti-patterns and common integration mistakes. Use when reviewing Canva code, onboarding developers, or auditing existing Canva integrations for best practices violations. Trigger with phrases like "canva mistakes", "canva anti-patterns", "canva pitfalls", "canva what not to do", "canva code review".
bigquery-table-creator
Bigquery Table Creator - Auto-activating skill for GCP Skills. Triggers on: bigquery table creator, bigquery table creator Part of the GCP Skills skill category.
bigquery-scheduled-query
Bigquery Scheduled Query - Auto-activating skill for GCP Skills. Triggers on: bigquery scheduled query, bigquery scheduled query Part of the GCP Skills skill category.
bigquery-ml-model-creator
Bigquery Ml Model Creator - Auto-activating skill for GCP Skills. Triggers on: bigquery ml model creator, bigquery ml model creator Part of the GCP Skills skill category.
anth-known-pitfalls
Identify and avoid common Claude API anti-patterns and integration mistakes. Use when reviewing code, onboarding developers, or debugging subtle issues with Anthropic integrations. Trigger with phrases like "anthropic pitfalls", "claude anti-patterns", "claude mistakes", "anthropic common issues", "claude gotchas".
analyzing-query-performance
Execute use when you need to work with query optimization. This skill provides query performance analysis with comprehensive guidance and automation. Trigger with phrases like "optimize queries", "analyze performance", or "improve query speed".
adobe-known-pitfalls
Identify and avoid Adobe-specific anti-patterns: using deprecated JWT auth, not caching IMS tokens, ignoring Firefly content policy, missing async job polling, and leaking p8_ secrets. Real code examples with fixes. Trigger with phrases like "adobe mistakes", "adobe anti-patterns", "adobe pitfalls", "adobe what not to do", "adobe code review".
bigquery-pipeline-audit
Audits Python + BigQuery pipelines for cost safety, idempotency, and production readiness. Returns a structured report with exact patch locations.
database-query
Query database safely with parameterized statements
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.