useQueries manual aggregation

[damianfrizzi]

Problem

useQueries was a great addition to the library and we use it heavily in our app. However, a disadvantage of the current implementation is that we have to manually get the aggregated information when we need it (which is basically always the case). This leads to a lot of unnecessary boilerplate in our code base. This problem was already described in this comment.

Suggestion

Before:

const results = useQueries(holdings.map(h => ({
  queryKey: ['holding', h],
  queryFn: fetchHolding
})

if (results.some(r => r.isLoading)) return <Loading />
if (results.some(r => r.isError)) {
  const first = results.find(r => r.error)
  return <Failure error={first.error} />
}

const value = results.reduce((m, r) => m + r.data.value, 0)
return (
  <div>
    Portfolio size: {value}
    {results.map(r => <HoldingData key={r.data.ticker} ... />}
  </div>
)

After:

const { isLoading, isError, error, data } = useQueries(holdings.map(h => ({
  queryKey: ['holding', h],
  queryFn: fetchHolding
})

if (isLoading) return <Loading />
if (isError) return <Failure error={error} />

const value = data.reduce((m, d) => m + d.value, 0)
return (
  <div>
    Portfolio size: {value}
    {data.map(d => <HoldingData key={d.ticker} ... />}
  </div>
)

Would you consider adjusting the API do provide this aggregated information? It would help reducing unnecessary boilerplate and align the usage of useQuery and useQueries.

[TkDodo]

It depends on the use case. You might want to display a loading spinner while at least one query is loading, others might want to show data as soon as it’s available and only show a spinner while all queries are loading.

That’s why the api is un-opinionated. For your use-case you can easily make a custom hook with 5 lines of code that encapsulates the results.some(...) logic and use that over directly calling useQueries.