pitfalls-tanstack-query
Debug TanStack Query Issues
TanStack Query v5 introduces breaking changes and subtle caching behaviors that cause bugs. This skill provides proven patterns and anti-patterns for correct data fetching, mutations, and cache invalidation.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「pitfalls-tanstack-query」。 Review my useQuery implementation for TanStack Query v5
預期結果:
- QueryKey uses full URL path for proper deduplication
- queryFn correctly fetches from matching endpoint
- StaleTime configured appropriately for your use case
- Consider adding refetchOnWindowFocus if needed for live data
正在使用「pitfalls-tanstack-query」。 Why is my data stale after mutations?
預期結果:
- Missing queryClient.invalidateQueries in onSuccess handler
- Add onSuccess callback to invalidate relevant queries
- Verify queryKey matches exactly between fetch and invalidation
安全審計
安全This is a documentation-only skill containing markdown and TypeScript code examples. All 16 static findings are false positives: TypeScript template literals were misidentified as shell commands, API patterns were misidentified as cryptographic code, and metadata fields were misidentified as network/filesystem access. No executable code, network calls, or file system operations exist.
風險因素
🌐 網路存取 (1)
📁 檔案系統存取 (1)
品質評分
你能建構什麼
Debug Data Fetching
Fix data fetching bugs in React components using TanStack Query
Review Code Quality
Review pull requests that use TanStack Query for common mistakes
Migrate to v5
Identify v4 patterns that need updating to v5
試試這些提示
Review this useQuery implementation for correct TanStack Query v5 patterns. Check queryKey structure, queryFn, and options:
Check this useMutation for proper cache invalidation. Does it invalidate the correct queries on success?
Show me the correct pattern for optimistic updates with rollback in TanStack Query v5. Include onMutate, onError, and onSettled handlers.
Identify all v4 patterns in this code that need updating to v5. Specifically look for isLoading that should be isPending.
最佳實務
- Use full URL paths in queryKeys like ['/api/strategies', id] for proper deduplication
- Always invalidate relevant queries in onSuccess of useMutation to keep cache fresh
- Use isPending instead of isLoading for mutation state checks in v5
避免
- Short queryKeys like ['strategy'] that prevent proper deduplication across components
- Forgetting to call queryClient.invalidateQueries after mutations causing stale data
- Using isLoading instead of isPending for mutation state checks in v5