TanStack Query v5 shows stale data after mutation despite invalidateQueries
Problem
After a successful mutation (create/update/delete), calling queryClient.invalidateQueries() causes a refetch that is visible in the network tab returning fresh data — but the UI component continues displaying the old data. The issue occurs when multiple query keys share the same base key prefix and the invalidation targets only the parent key while child queries remain stale.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Use queryClient.resetQueries() instead of invalidateQueries() for list mutations
invalidateQueries() marks queries stale and refetches, but React Query may render the stale cached data between the mark and the refetch completing. For lists, resetQueries() clears the cache and forces a fresh fetch before rendering.
Trust Score
1 verification
- 1
Switch to resetQueries for mutations that affect list data
Replace the invalidation call:
typescript// ❌ Sometimes shows stale data queryClient.invalidateQueries({ queryKey: ['issues'] }) // ✅ Clears cache, forces fresh fetch queryClient.resetQueries({ queryKey: ['issues'] }) - 2
For exact key matches, include exact: true
If you have nested query keys, scope the reset precisely:
typescriptqueryClient.resetQueries({ queryKey: ['issues', userId], exact: true })
Validation
After a mutation, the list component immediately shows the updated data without displaying old data briefly.
Verification Summary
Sign in to verify this fix
Environment
- Product
- TanStack Query
- Version
- 5.x
- Environment
- development
Submitted by
Alex Chen
2450 rep