How to Run a Variable Number of Parallel Queries - Possible Feature Request?

[jaekwak02]

The issue I have is that if I use a Promise.all inside of the async function of useQuery, all of the API calls are called together, when I would really like to cache each call separately and make sure that only one call is made at a time for each, as the response payloads are very large.

For example:

• User has 3 items selected from a list. The data for each item is being loaded in the background using fetch.
• Before any of the 3 items have finished loading, the user selects a 4th item from the list, with an ID of 4. The app should start loading the data for the 4th item, without cancelling the queries for the previous 3 items.
• As each of the 4 queries completes, it updates the page with new information while the other queries continue to run in the background
• If the user unselects an item, the item data should be removed cleanly without refetching the other 3 item datas.

A few notes:

• I do not think I can use usePaginatedQuery, since it seems like it only returns one "page" at a time
• I do not think I can use useInfiniteQuery, since I need to fetch multiple "sections" at a time, and I cannot remove a query from the results unless I track it externally
• I cannot simply use multiple components using useQuery because I need to do aggregations on the completed dataset.
• Well, actually, I think I could use useQuery, using some sort of clever state or cache handling, which is what I think I will do for now, but it seems a little hacky and a lot of manual effort

Maybe a hook like this will benefit the library? (where data is an array of results corresponding to the items in queries)

const [ data, ... ] = useQueries(
  key, 
  async (key, id) => api.getItem(id), 
  {
    queries: [ 1, 2, 3, 4 ]
  }
);

Or maybe something like this makes more sense:

const [ data, ... ] = useQueries(
  [key1, key2, key3], // Array of keys 
  async (key) => api.getItem(getItemIdFromKey(key)), 
);

Or... maybe there's a way to do all this already with the library, if anyone cares to share their solution?

Editing to answer my own question: I guess the easiest way to do this with the current API would be to mount one component for each query, and in the parent, use queryCache to subscribe to each query key and respond to data changes. This actually feels pretty straightforward to me.

[ehaynes99]

One component for each would render all at once and create all of the promises at the same time, so you would likely still be loading in parallel. For sequential loading (or just sequential promises in general), you can do something like:

const useValues = (ids) => {
  return useQuery(['queryKey', { ids }], async (key, { ids }) => {
    const result = []
    for (const id in ids) {
      const value = await api.getValue(id)
      console.log('***** loaded:', value)
      result.push(value)
    }
    return result
  })
}

An imperative loop like for or while is necessary, because their functional variants won't wait in sequence. I.e. array.map(async () => await whatever) runs through them all immediately and returns a new array of promises all running in parallel.

[ehaynes99]

Note that the above waits to return the array until all are finished. If you want to render each as it finishes, another solution that's pretty slick would be using the p-limit library. It throttles requests internally, so as long as all instances of your hook share the same "limit lock", each will be blocked until another finishes. This has the added benefit of allowing a configurable number. I.e. maybe loading 50 all at once causes issues, but it's it ok to do a smaller number concurrently.

import pLimit from 'p-limit'

// declare outside of the hook, so all instances use the same one
// can change the 1 to however many can safely run at the same time
const limit = pLimit(1)

const useValue = (id) => {
  return useQuery(['valueKey', { id }], async (key, { id }) => {
    return limit(() => api.getValue(id))
  })
}

[jaekwak02]

Thanks for the responses! Actually, though, I DO want to load the requests in parallel. My requirements for this page are:

• Load items in parallel
• Update the page as items load
• Add or remove items being loaded at any time
• Do not duplicate requests or restart them, because each item is very large

The solution I landed upon is something like this in case it is useful to anyone:

• Creates multiple instances of components with useQuery
• Each item is cached separately under its own key, requests are not duplicated
• Not a complete example, is simplified and rerenders many times, needs further optimization for production use
• Excuse me for making mistakes! I'm using the raw text editor and it's pretty hard to write correct code

const MainComponent = () => {
  const [items, setItems] = useState([]);
  const [itemQueryData, setItemQueryData] = useState({});

  return <>
    {/* Multi-select picklist to select items */}
    <MultiSelect ... />

    {/* Map over items to start queries for each */}
    {items.map(item => (
      <ItemQuery key={item.id} id={item.id} onStatusChange={(status) => {
        setItemQueryData(state => {
          state[item.id] = state;

          return { ...state };
        })
      }}
    />)}

    {/* Show loaders */}
    {items.map(item) => (<div key={item.id}>
      {itemQueryData[item.id]?.isLoading 
          ? `Loading Item ${item.name}...` /> 
          : `Item ${item.name} Loaded`}
    </div>)}

    {/* Consume the data */}
    <SomeComponentThatUsesAllItemData items={items} itemData={items.map(item => itemQueryData[item.id])?.data} />
  </>
}

const ItemQuery = (id, onStatusChange) => {
  const status = useQuery(["item", id], async (key, id) => api.getItem(id), {...}); // Use the right options here to make it work properly

  useEffect(() => onStatusChange(status), [status]); // Use the callback provided by the parent component
}

[lukaszmakuch]

A couple of months ago I forked the V1 branch of react-query and developed a useQueries hook like this:

const [{data: data1}, {data: data2}, {data: data3}] = useQueries(
  [keyAndParams1, keyAndParams2, keyAndParams3],
  fetchFn,
  opts,
);

It’s based on another hook which I called useManyEffects. It’s true we cannot do this in React:

const results = inputs.map(someHook)

But nothing stops us from doing this:

const results = someHook(inputs)

And that’s the idea behind useManyEffects - to work with collections.

The changes to react-query were mostly about adding one extra file for that new hook. I was able to reuse the existing under-the-hood mechanisms to make it work. It’s been working great and it’s not causing any problems. It allows to cache individual items and deduplicate requests. All without the need of altering the components tree or implementing inter-component communication.

Looking at it now, if I were to redo it, I think I’d go one step further and shape the API like this:

const [{data: data1}, {data: data2}, {data: data3}] = useQueries(
  [[key1, param1, param2, fetchFn1, opts1], [key2, param3, fetchFn1], [key, fetchFn2, opts2]],
);

I’ve had no need of anything like this yet, but I like the simplicity that comes with making every parameter a member of a collection.

What do you think about it? Would that help you to build your apps?

[tannerlinsley]

Nice! We’ve actually already added an official useQueries hook to v3 :)

[lukaszmakuch]

@tannerlinsley where can I learn more about the official useQueries hook?

[sergiodxa]

@lukaszmakuch you can see it in the beta docs, exactly in:

• API Reference
• Dynamic Parallel Queries with useQueries
• Migrating to React Query 3 - useQueries

[lukaszmakuch]

That API looks great!

Will it support suspense? So that a component can start multiple queries in parallel and rendering will continue only once all of the results are ready? I mean something similar to await Promise.all([.

[lukaszmakuch]

@tannerlinsley has there already been a decision regarding the behavior of useQueries with Suspense?