Vue Query + Nuxt 3 SSG - Can not reset hydrated query

[YaredFall]

Describe the bug

queryClient.resetQueries() does not work as expected for server-hydrated queries. Hydrated query isLoading state is always false, unlike to queries run on client.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/admiring-frog-rnw27x

Steps to reproduce

There is server-prefetched request with post id = 1;

1. Click reset posts queries (it calls queryClient.resetQueries);
2. Notice that query just refetches, cache entry not being reset and isLoading state is always false;
3. Click increase id button and wait for new post to load;
4. Click reset posts queries again;
5. Notice that client-fetched query being reset as expected, cache is reset and isLoading state becomes true for a moment;
6. You can decrease id back to 1 and repeat step #1 to ensure that resetQueries is not able to reset server-prefetched query

Expected behavior

queryClient.resetQueries is able to reset any query, wether its server fetched or client fetched

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: Windows, browser: Chrome 124.0.6367.78 / Firefox 125.0.2

Tanstack Query adapter

vue-query

TanStack Query version

5.32.0

TypeScript version

No response

Additional context

No response

[DamianOsipiuk]

This is by design as reset restores the initial state of the query, which is hydrated from the server - https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientresetqueries

[YaredFall]

This is by design as reset restores the initial state of the query, which is hydrated from the server - https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientresetqueries

What is a proper way to completely reset server-prefetched queries then?

Why the state after hydration is considered to be the inital state?

As mentioned in docs about SSR, queries are being "prefetched" on server. When you prefetch a query on the client, its inital state is the state before any load, not the state after prefetch, unlike to server-prefetch queries. In my opinion, query reset should reset query to its pre-loaded state, not after-hydration state.

[DamianOsipiuk]

What is a proper way to completely reset server-prefetched queries then?

queryClient.resetQueries - But it would NOT notify existing observers, as query is just removed.

Why the state after hydration is considered to be the initial state?

So you would not have intermediate loading state displayed on the client side. With SSR you want you page to appear to the user in fully populated way.

In my opinion, query reset should reset query to its pre-loaded state, not after-hydration state.

I guess we could add a prop to control this behavior. Not sure if there is a specific reason to not do it for react-query. @TkDodo

[TkDodo]

queryClient.resetQueries() does not work as expected for server-hydrated queries. Hydrated query isLoading state is always false, unlike to queries run on client.

This was fixed with:

• https://github.com/TanStack/query/pull/7837

When a query is created with hydration, it still re-sets to the default state. The only way to get a different state is when initialData is set.

[YaredFall]

Checked just now and it's surely fixed! Thanks!