Listen for any query changes and trigger component to rerender

[AsuraKev]

Hi there,

I have a scenario where i am building breadcrumbs with react router, the information that a breadcrumb displays comes from the data fetched via react query. I am initialising a query inside react router loader like below:

As the nature of react router loader goes, it fires the loader as soon as the route mounts and in some cases I explicitly skip calling react query and the later on when the actual page component mounts a useQuery is fired. However this leaves the breadcrumb not aware about a useQuery being called.

In summary what i would like to do is that in the breadcrumb component, I would like to listen for all query state changes and rerender breadcrumb so that it can display the crumbs accordingly.

Any idea how to achieve this? I know in RTK Query I can just subscibe to query via useSelector, but not sure how to do it in react-query

thanks a lot

[TkDodo]

you would just subscribe with useQuery

[AsuraKev]

Thanks for the reply. Do you know if we can subscribe to all queries inside a component?

[TkDodo]

queryClient.getQueryCache().subscribe