I'm using React Query and I'm not sure why one of my useQuery hooks is logging undefined while the other one is logging the correct data. They're both async functions and are literally doing the same thing. I've been trying to debug this for a while but to no avail, I've hit a wall.
How can I fix it so that console.log(winnersData); also logs the correct data just like console.log(data);?
Note: Yes, fetchUploads() is returning data correctly when testing on Postman so we can rule out that nothing's being returned.
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} = await axios.get('http://localhost/api/choose-winners', {headers});
return winnersData
}
const { data } = useQuery('uploads', fetchUploads)
const { winnersData } = useQuery('winners', fetchWinners)
console.log(data); // returns correct data
console.log(winnersData); // returns undefined
return(...);
I think the confusion revolves around your first return being called data. Coincidentally, Axios requests return an object with a property called data, which you are successfully destructuring. They don't have a property called winnersData, hence const {winnersData} = await axios.get('http://localhost/api/choose-winners', {headers}); is undefined.
Edit:
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} = await axios.get('http://localhost/api/choose-winners', {headers});
// return winnersData
// Remember, there is no winnersData on the object Axios is returning
const {data} = await axios.get('http://localhost/api/choose-winners', {headers});
return data
// There is a data property for you to destructure (as there is on every successful Axios return), so we'll return that!
}
const data = useQuery('uploads', fetchUploads)
const winnersData = useQuery('winners', fetchWinners)
// I'm not sure what the shape of the data returned by these functions is, so I took out the destructuring. Remember, you can't destructure a property that isn't there.
console.log(data); // returns correct data
console.log(winnersData); // returns undefined
return(...);