Dynamic number of queries

[agriffis]

I need to make a dynamic number of queries depending on user config:

config = {ids: [1, 2, 3, 4]}
results = config.ids.map(id => useQuery(id, fetch))

Now of course we can't use hooks this way. What we need instead is a useQueries hook that internally manages the list or object of ongoing queries.

For example, I wrote a hook called usePromises, but it doesn't have all the stale-while-revalidate and other functionality of react-query.

Any thought of adding this to react-query, or other suggestions?

[denisborovikov]

Use only one useQuery and retrive the all required data in your fetch function.

results = useQuery(['todos', config], () => Promise.all(...))

[agriffis]

Thanks! But then the component won't rerender as API calls return, instead it has to wait for the entire batch, right?

[tannerlinsley]

Correct. But in reality, the whole point of parallel queries is that they realistically all need to resolve before you can do anything with them, otherwise, you could just put them in separate components.

[agriffis]

Between these two answers, I might have what I need. Thanks!

[lukaszmakuch]

Hi all!

I'm also interested in dynamically issuing multiple queries.

The reason why I'd love to see it implemented in react-query is to leverage its cache and request deduplication. If I query multiple endpoints in my fetch function, I may end up issuing multiple identical requests, because the library cannot deduplicate them.

What do you think?

[tannerlinsley]

For now, you'll need to either:

• use a single useQuery and Promise.all to resolve multiple sets of data and cache them together, or
• use separate components for each piece of data, each with their own useQuery

In the future, we may add support for caching multiple queries in a single hook that is compliant with the rules of hooks. Until then, these are your best options.