Is it possible to invalidate all queries within a component hierarchy?

[Shaddix]

We have a UI with Tabs, and when switching between Tabs we'd like to refetch all queries used within the activated Tab.

Previously our tab components were unmounted when switching away from them and mounted again when switching back to it.
Queries were perfectly invalidated in this scenario (automatically).

But now we are not unmounting Tabs anymore, so that behavior is lost.
Is it possible to somehow trigger refetch for all queries that are mounted within certain component (and all it's children)?

[TkDodo]

queryClient.refetchQueries({ active: true }) would refetch all queries that have an active observer. Note that in v4, this will be:

queryClient.refetchQueries({ type: 'active' })

[Shaddix]

thanks! That will refetch all queries on a page, though.
My goal was to be able to refetch a single component (and it's children). But this doesn't seem to be possible with a current API as I guess.

[TkDodo]

No, I don't think it's possible. Maybe setting enabled on all those queries to the current tab id only?

[Shaddix]

Thanks for the suggestion! Though, I found the meta property within QueryOptions and will try to use it (I will add tabId to meta and then refresh based on this meta tag.
I actually autogenerate useQuery hooks, so probably I'd be able to inject tabId automatically.

[TkDodo]

yeah, that's also a good idea. You can do something like:
queryClient.invalidateQueries({ predicate: (query) => query.meta?.refresh === true })

or so :)