useQueries understanding which query's response updated?
The useQueries hook returns an array with all the query results. The order returned is the same as the input order.
How can we distinguish what changed? For example, I have 2 queries, imagine one takes 5x longer than the other one. The useQueries hook keeps rerending the component because the second query is still loading.
Query1: L L L L L S
Query2: L L L L L L L L L L L L L L L L L L L S
In my case we do an expensive data transformation once the data is received, but since useQueries keeps rerendering, how do I detect the change? I know I can do useMemo to memoize the the data transform, however, the data fetched can be 10s of MBs so I want to be really careful.
Another thing I tried was to set some flag but this fails coz the data can be refetched (either cache invalidation or other configuration). So the flag works for first time, but the second time it fetches data, I have to end up building complex state machine which I assume useQuery is also doing
9 Replies
ratty-blush•2y ago
Are you on v5? Just use combine
correct-apricotOP•2y ago
yes on v5. what is combine?
ratty-blush•2y ago
A property of useQueries
correct-apricotOP•2y ago
aah .. sorry I wasn't looking at api reference page.
I don't believe it addresses my problem. My problem is how to understand which query's result is updated in the useQueries response. For example - Tick 1: [query1result, query2result] Tick 2: [query1result, query2result] Tick 3: [query1result, query2result] but how do I know if query1result has changed? or query2result has changed?
I don't believe it addresses my problem. My problem is how to understand which query's result is updated in the useQueries response. For example - Tick 1: [query1result, query2result] Tick 2: [query1result, query2result] Tick 3: [query1result, query2result] but how do I know if query1result has changed? or query2result has changed?
genetic-orange•2y ago
Why is it important what changed ?
correct-apricotOP•2y ago
the received data goes through an expensive data transform. In my case, one of the query takes ~1s to responsd and another takes 10~20s to respond. So the system ends up processing the query1results over and over.
useMemo or memoization may not be a good fit for my usecase since the responses are huge and we do have a refetch intervals configured
@TkDodo 🔮 thoughts?
genetic-orange•2y ago
useMemo or memoization may not be a good fit for my usecase since the responses are huge and we do have a refetch intervals configuredwhy not? it's exactly made to avoid expensive recomputations. even if refetchInverval returns new data, structural sharing will make sure it will be the same reference if nothing changed. And if something changed - well, then you need to recompute anyways
afraid-scarlet•2y ago
Question: in Mutation onsuccess callback i have a history push function to navigat to a different page upon mutation completion. i noticed that if the user already navigated away from the page this side effect is not running at all. is this normal and backed into react query?
harsh-harlequin•2y ago
From the docs:
Please keep in mind that those additional callbacks won't run if your component unmounts before the mutation finishes.