Derived / Computed query selector

[talberkoMelio]

Hi
I would like to suggest a new feature - derived (computed) query selector.
The selector will be able to "observe" one or more queries, and export a derived value.
Is is something thats in your roadmap? I would like to contribute - please let me know how to get started if it's relevant.

Thanks

[TClark1011]

How would this be different from the select option you can use in useQuery?

select: (data: TData) => unknown
Optional
This option can be used to transform or select a part of the data returned by the query function. It affects the returned data value, but does not affect what gets stored in the query cache.

[talberkoMelio]

@TkDodo BTW, I was trying to use onSettled function, so when data is settled, I want to store it in the recoil state.
I noticed that when the data is settled, but the query is not mounted, the onSettled is not triggered - also not in the next time it is mounted.
(I added log to the onSettled. I see it prints only when data is settled while the query is mounted, otherwise, data is settled in the query, but the function is not triggered).
Is it a bug?

[TkDodo]

So do I need to pass the same object as I pass to the single useQuery (key and queryFn)?

yes.

I noticed that when the data is settled, but the query is not mounted, the onSettled is not triggered

callbacks are on a per-observer level. if the observer (your component) unmounts, there is no callback to call anymore. If you mount the component twice, both onSettled callbacks will be called.

It's generally not a good idea to do state syncing from the callbacks.

[talberkoMelio]

@TkDodo I think using useQueries will not solve the problem, as its code will run each time I will render it.
For example I will use useQueries to orchestrate all 3 indivitual queries into one, and return a grouped object. The grouped object is not cached similar to the useQuery itself.
I would like to have a way to access a "computed" data, which depends on multiple queries, and is cached similar to the useQuery hooks. Any way to acheive it using the current api of react-query?

[TkDodo]

why wouldn't useQueries solve it?

const [result1, result2] = useQueries(query1, query2)

const computedResult = React.useMemo(() => {
  if (result1.data && result2.data) return computeResult(result1.data, result2.data)
  return null
}, [result1.data, result2.data])

downside is that a component that uses this might render a bit more often, because results will come in asynchronously and there is no way to bail out of rendering at that point. But this is likely not a problem, and if it is, pass computedResult to a memoized component and do the rest there, so the parts that render often are not expensive.

---

Other than that, you can always build a single query that does multiple requests with Promise.allSettled, and then use select to transform the data.

But no, anything else for deriving data from multiple queries is not supported.

[non25]

It's kinda sad to do this in react land. 🙂
Each component that uses such derivation will make another clone, unless you push it to the context above, which de-opt it even further by triggering re-renders.

Currently going through discussions on the repo. 😁
Posted some relevant thoughts here

[talberkoMelio]

Any update from moderators?