Mutation status incorrect after navigation in SvelteKit

[EugeneDraitsev]

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

Recording.2025-03-08.101334.mp4

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