Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
YaredFall opened this issue Apr 26, 2024 · 2 comments
Open

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

YaredFall opened this issue Apr 26, 2024 · 2 comments

Comments

@YaredFall
Copy link

YaredFall commented Apr 26, 2024

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

@YaredFall YaredFall changed the title Vue Query + SSG - Can not reset hydrated query Vue Query + Nuxt 3 SSG - Can not reset hydrated query Apr 26, 2024
@DamianOsipiuk
Copy link
Contributor

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants