How to use { useQuery } from react-query while iterating over an array of data

Question

I'm trying to integrate react-query into my React project. What I have is a custom hook - useBundles which fetches data from a GraphQl endpoint as shown below -

function useBundles() {

  const { data, status, isSuccess } = useQuery(
    'SaleBundles',
    async () => await request(endpoint, gql`query {${saleQuery}}`),
  );

  return { data, status, isSuccess };
}

I use the return value in my component like this const { data, status, isSuccess } = useBundles(); which works perfectly fine.

Now, what I want to do is, for each item in data I want to call another endpoint (a REST endpoint this time) and I have a seperate async function for that called getData(data: Array) which uses async-await to fetch data from my REST endpoint.

I could just call getData in useBundles passing to it data as an argument. But since getData is async it is required to use await with it (which I can't because I can't define a hook as async).

As an alternative, I tried not to use getData in useBundles but directly call the endpoint using axios like this - data.forEach((item) => useQuery("some-unique-key", axios.get(<endpoint>)))

This gives me an error saying that useQuery cannot be used in a loop.

I'm kinda stuck at this point as how to proceed. Would appreciate any help. Thanks.

Answer 1

There are basically two ways to solve this:

1. useQueries

useQueries can be used with a fixed array, but also with a dynamic one, so:

useQueries(data.map(item => ...))

would work. It will give you an array of QueryResults back.

2. map and create a component

data.map(item => <Item {...item} />

then, you can call useQuery inside the Item component.

---

Both approaches will yield concurrent requests, the difference is mainly where you have access to the response data: With useQueries, you have access to all of them in your root component. With the second approach, each Item will only have access to its own data. So it just depends on your needs / use-case which version you prefer.