query icon indicating copy to clipboard operation
query copied to clipboard

QueryClient.clear breaks existing queries

Open farmaazon opened this issue 7 months ago • 1 comments

Describe the bug

In vue query, after calling queryClient.clear all existing queries created with useQuery instance stop working.

An example where this is problematic: I have a query fetching information about login status and user, and many more. When logging-out, I want to remove cache of all queries, because it may contain user-related data. So I call clear after logout, but then login breaks because query for user and login status works no more.

Your minimal, reproducible example

https://github.com/farmaazon/tanstack-query-repro

Steps to reproduce

  1. clone and run the project
  2. click "invalidate" button - the timestamp is refreshed, as expected
  3. click "clear" button
  4. Now "invalidate" button stops working

Expected behavior

clear removes cached data, but existing queries are still functional and reacts for invalidation.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

I reproduced it on linux (Garuda) chrome

Tanstack Query adapter

vue-query

TanStack Query version

v5.79.2

TypeScript version

~5.8.0

Additional context

No response

farmaazon avatar Jun 03 '25 07:06 farmaazon

You should potentially use queryClient.resetQueries

Vue, unlike React run the setup function only once, therefore it can subscribe only once.

By calling queryClient.clear you are basically removing all queries and observers, breaking already subscribed, mounted components.

DamianOsipiuk avatar Jun 04 '25 18:06 DamianOsipiuk

I think this should be documented somewhere. queryClient.clear says it removes connected caches, so I assumed this about it: cache not query itself.

Also, I would expect that useQuery hook works mostly the same on both frameworks, and it's implementation will take into consideration framework differences.

farmaazon avatar Jun 27 '25 07:06 farmaazon