How to access query key above its scope?
I have a page component that renders a list (deeply nested). The list has a dynamic query key that changes once the user interacts with the different filters. I want to access the ever-changing query key above the scope of the list component, so I can read the query state and act on it (show/hide components accordingly). Is there a way to do that without maintaining unique ids? for example, the list will have an id like so:
["main-list", ...otherKeys], another query will be ["sidebar-list", ...otherKeys] etc'.3 Replies
harsh-harlequin•10mo ago
Might have to use the
queryCache to subscribe/find the queries you care about: https://tanstack.com/query/latest/docs/reference/QueryCache/#querycachefindallQueryCache | TanStack Query Docs
The QueryCache is the storage mechanism for TanStack Query. It stores all the data, meta information and state of queries it contains. Normally, you will not interact with the QueryCache directly and...
harsh-harlequin•10mo ago
Everything else is a simpler version of query state, like
isFetching or datacorrect-apricotOP•10mo ago
Yea, I did end up doing that. I created a
useQuerySubscription(queryKey) hook lets you do that. I just need to make it accept a predicate so that it will be more granular that it currently is. I do think the initial solution of having ids might be worth it, since it absolves of having to deal with the dynamic query key completely.