The Axios object doesn't have a winnersData property, so destructuring it returns undefined in the original block of ocde. I need to destructure data from both Axios requests and what I call them later on needs to be different. I'm just not sure how to implement this and have been struggling for a while. My attempt below fails as well.
How can I implement this?
Original block of code:
async function fetchUploads(){
const headers = {
"Accept": 'application/json',
"Authorization": `Bearer ${authToken}`
};
const {data} = await axios.get('http://localhost/api/get-user-uploads-data', {headers});
return data;
}
async function fetchWinners(){
const headers = {
"Accept": 'application/json',
"Authorization": `Bearer ${authToken}`
};
const {winnersData} = axios.get('http://localhost/api/choose-winners', {headers});
return winnersData
}
const { data } = useQuery('uploads', fetchUploads)
const { winnersData } = useQuery('winners', fetchWinners)
console.log(data); // logs data correctly
console.log(winnersData); // logs undefined
return(....);
Attempted fix for fetchWinners() I've tried but it failed:
async function fetchWinners(){
const headers = {
"Accept": 'application/json',
"Authorization": `Bearer ${authToken}`
};
const { winnersData } = axios.get('http://localhost/api/choose-winners', {headers});
return { winnersData };
}
const { data } = useQuery('uploads', fetchUploads)
const { data: { winnersData } } = useQuery('winners', fetchWinners)
console.log(data.winnersData); // still logs undefined
Looks like useQuery always returns a property called data, so you just need to rename it (same for the axios return). And don't forget an await for the axios call.
const { data } = await axios.get('http://localhost/api/choose-winners', {headers});
return data;
...
const { data } = useQuery('uploads', fetchUploads);
const { data: winnersData } = useQuery('winners', fetchWinners);
console.log('winnersData', winnersData);