Vue: Query key doesn't match the current value of ref used inside query function after `invalidateQueries`

[henribru]

Describe the bug

This seems like essentially the same problem as #5910, except with invalidateQueries instead of refetch. It also happens with resetQueries (maybe more?). Basically, the query key that's passed into the query function can be out of sync with the current value of the ref after the ref is changed.

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-dnf3kd?file=src%2FApp.vue

Steps to reproduce

1. Open up the reproduction
2. Look at the console logs, which print:

foo foo
foo bar
bar bar

Notice that in in the second line, queryKey[1] and foo.value are out of sync. There's also an extra fetch due to this.

Expected behavior

I would have expected it to print:

foo foo
bar bar

where the query key is in sync with the ref and there's no redundant fetch.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Windows 10
• Browser: Chrome
• Version: 119

Tanstack Query adapter

vue-query

TanStack Query version

v5.8.4

TypeScript version

No response

Additional context

No response

[henribru]

As in #5910 a possible workaround is to delay the invalidateQueries using nextTick.

[TkDodo]

@DamianOsipiuk FYI

[henribru]

@DamianOsipiuk Thanks for the fix. As I mentioned resetQueries has the same issue, so I'm guessing it should get the same treatment

[DamianOsipiuk]

@henribru Feel free to open a PR with necessary changes

[henribru]

If the same fix applies then I can give it a go 👍

[DamianOsipiuk]

Any method on queryClient would not be able to sync otherwise than micro tasks flush. So the same solution applies.

[henribru]

@DamianOsipiuk Hmm, I'm looking into it now and it looks like the same solution works fine for resetQueries. But I noticed refetchQueries also has a similar issue (see https://stackblitz.com/edit/vitejs-vite-zmpf9f?file=src%2FApp.vue). When I try to apply the same fix for that, the behavior becomes pretty odd. Without the fix the output is

foo foo
foo bar
bar bar

as you can see on Stackblitz. With the fix, the output becomes

foo foo
bar bar
foo bar
bar bar

(can be seen in the example in my branch at main...henribru:react-query:reset-query-context-sync-fix)

Any ideas?

[henribru]

Incidentally, it looks like the Svelte and Angular adapters have the same issue of mismatching values with all 3 of those methods. The Solid adapter seems to have it for just refetchQueries. I don't use these personally so I'm probably not going to open issues for that.