Mutation status incorrect after navigation in SvelteKit
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 50.3k
- Forks
- 4.2k
- Avg merge
- 18h 25m
- Merged PRs (30d)
- 200
Description
Describe the bug
Hi!
After navigating to another page in a SvelteKit app, an ongoing mutation's status remains pending instead of success
Your minimal, reproducible example
https://codesandbox.io/p/github/EugeneDraitsev/svelte-tanstack-query-mutation-status-issue/master
Steps to reproduce
You can check codesandbox link or check my repo: https://github.com/EugeneDraitsev/svelte-tanstack-query-mutation-status-issue
I have pretty simple mutation:
export const signIn = createMutation(
{
mutationFn: async () => {
// wait for 1 second
await new Promise((resolve) => setTimeout(resolve, 1000));
},
onSuccess: async () => {
await goto('/auth');
await queryClient.invalidateQueries({ queryKey: ['customer'] });
},
},
queryClient,
);
When a user clicks the Sign In button, I simulate a login and redirect the user to the /auth route. However, when I navigate back from the /auth page to /, I see that $signIn.status is pending instead of success. I also can see the correct success status in the TanStack Query devtools.
If I comment out await queryClient.invalidateQueries({ queryKey: ['customer'] }); in the onSuccess function, everything works fine. However, I still consider this behavior as a bug.
Expected behavior
My mutation has success status
How often does this bug happen?
None
Screenshots or Videos
https://github.com/user-attachments/assets/7e56dedc-c841-4552-97a3-a3f177702d86
Platform
- OS: Windows 11 24H2
- Browser: Chrome
- Version: 134.0.6998.35 (Official Build) (64-bit)
Tanstack Query adapter
None
TanStack Query version
^5.67.2
TypeScript version
^5.0.0
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox or reproduction repository and the signIn mutation's onSuccess handler. Reproduce navigation to /auth and back while comparing the mutation status with the TanStack Query devtools, especially when invalidateQueries({ queryKey: ['customer'] }) runs. Done means the status is success after returning to / without removing invalidation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 50/100