How to know if a query is mounted?

[Sheraff]

I'm looking for a way to know whether a query (identified by queryKey) is currently mounted anywhere.

Here's my use-case: I have a service worker that sometimes receive fresh data for some endpoints will then postMessage to the client which will setQueryData with the fresh data. However I'd like to be able to only update the cache if that query isn't currently in use in order to avoid swapping content that the user might currently be focused on.

I've looked at queryClient.getQueryState but as the docs say

• The status gives information about the data: Do we have any or not?
• The fetchStatus gives information about the queryFn: Is it running or not?

So I guess that would be a 3rd state that doesn't exist yet:

• The mountStatus gives information about the usage: Is the data in use or just sitting in the cache?

Is there any other way to obtain this information?

---

I'm not sure it really matters for this question, but for context, here's the relevant piece of code where i'm having this need: https://github.com/Sheraff/soft-serve-tunes/blob/bf8d7670287220ed852bae1ed2dae15b9512656f/src/components/WatcherSocket/index.tsx#L48-L61

[Sheraff]

I actually found my answer by reading some unrelated questions.

const state = queryClient.getQueryState([queryKey, queryParams], { type: "inactive" })

The query filters allow for matching only inactive queries, which is exactly what I needed.

Now as a bonus for my next step: would anyone know whether it would be possible to somehow subscribe to "callback whenever this query becomes inactive"?

[TkDodo]

What's the use case?

[TkDodo]

Ah, it's in the original post, sorry. From what I can see, you can just call getQueryState as soon as the websocket message comes in? So you wouldn't need to react to the change of becoming inactive.
But generally, subscribing to the queryCache like the devtools do it is the way.

[Sheraff]

@TkDodo the idea of "reacting to the query becoming inactive" would be to setQueryData as soon as the query become inactive (for the same reason as above: to avoid changing the data that the user might be currently reading).

I'm posting this link here for future reference : https://tanstack.com/query/v4/docs/react/reference/QueryCache#querycachesubscribe (since I'm assuming that's what you meant by "subscribing to the queryCache").

[Sheraff]

@TkDodo This is really nice, it works like a charm. This library really is a gold mine of DX wonders!

If anyone is interested in this question in the future, here's the solution I landed on: https://github.com/Sheraff/soft-serve-tunes/blob/d34b632bf5e389fa401eb580fb9118cd635e0f48/src/components/WatcherSocket/index.tsx#L50-L79