how to fetch data using .map() method with react Query(useQuries)

Question

I have multiple id's of array for API.

something likes:

const ids= [1001,1002,1003,1004,1005,
2001,2002,2003,2004,2005,
3001,3002,3003,3004,3005,
4001,4002,4003,4004,4005,
5001,5002,5003,5004,5005,
6001,6002,6003,6004,6005,
7001,7002,7003,7004,7005,
8001,8002,8003,8004,8005]

i'm using this id's end of the api to fetch data using .map() method. here is my codes:

const fetchDetails = () => {
    const requestArray = (ids?.map(async(id) => {
       return await axios.get(`https://www.roads.com/road/api/roadControl/${id}`, myHeaders)
       .then((res) => {
        return res.data;
    })
    }))
    return requestArray;
  }
  const finalData = useQueries({
    queries: [
      { queryKey: ['post', 1], queryFn: fetchDetails},
    ]
  })

  console.log(finalData);

here is my output by using this codes for fetching data

so, as you can see here in output is showing me promise in array but i can't get the data. it's given me same as id's length promise. if anyone can help me to get the data.

if i use single id end of the API likes:

           return await axios.get(`https://www.roads.com/road/api/roadControl/1001`, myHeaders);

i can able to get the data for that specific api but when i use map to get all id's data to fetch, i can't able to view the data.

anyone can help me how to solve it or how can i able to view those data not promise. Thanks in advance for your trying!

S.N- i am using here false API for the purpose of security.

you can't turn asynchronous functions synchronous by using async/await ... it's called async for a reason — Jaromanda X
– Jaromanda X, Commented Oct 18, 2022 at 8:52
learn to use asynchrony - I can't help, I have no idea what useQueries is - especially what queryFn parameter is expected to be - i.e. can it be a function that returns a Promise - as a start, try return Promise.all(requestArray) (you can also ditch the async/await in the map callback function since it's completely redundant - i.e. async () => { return await something(); } is functionally equivalent to () => { return something();} when the only await is on the ONLY return statement) — Jaromanda X
– Jaromanda X, Commented Oct 18, 2022 at 8:55

TOMMASO26175 · Accepted Answer · 2022-10-18 09:12:12Z

1

This should help you resolve your promises : Promise.all

   Promise.all([yourpromises]).then((values) => {
      console.log(values);
    });

answered Oct 18, 2022 at 9:12

TOMMASO26175

311 silver badge8 bronze badges

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

Comments

TkDodo · Accepted Answer · 2022-10-29 14:43:18Z

0

if you want to map over multiple ids to generate multiple fetches, you need to pass the mapped values to useQueries:


const fetchDetails = (id) => {
  return axios
    .get(`https://www.roads.com/road/api/roadControl/${id}`, myHeaders)
    .then((res) => res.data)
}

const finalData = useQueries({
  queries: ids.map(id => [
    { queryKey: ['post', id], queryFn: () => fetchDetails(id)},
  ])
})

answered Oct 29, 2022 at 14:43

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Collectives™ on Stack Overflow

how to fetch data using .map() method with react Query(useQuries)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related