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.

TkDodo · Accepted Answer · 2022-02-17 08:36:16Z

6

There are basically two ways to solve this:

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.

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.

answered Feb 17, 2022 at 8:36

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vaibhav deep Over a year ago

I'm a bit confused here, can you provide a more explicit example using useQueries for my use-case?

TkDodo Over a year ago

instead of using useQuery in a loop, useQueries.

vaibhav deep Over a year ago

const results = useQueries(     saleBundles.map((bundle) => {       return {         queryKey: ['SaleBundle', bundle.id],         queryFn: async () => await fetchData(bundle, bundleTypes.sale),       };     }),   );

I'm doing this but on first load, results is an array of items and status is loading, so data is undefined

TkDodo Over a year ago

code looks right. status will be loading when the items are still fetching. As they come in one by one, those items in the array will go into success state.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related