Estoy usando React Query y no estoy seguro de por qué uno de mis ganchos useQuery está registrando undefined mientras que el otro está registrando los datos correctos. Ambas son funciones asíncronas y están literalmente haciendo lo mismo. He estado tratando de depurar esto por un tiempo, pero fue en vano, me he topado con una pared.
¿Cómo puedo arreglarlo para que console.log(winnersData); también registra los datos correctos como console.log(data); ?
Nota: Sí, fetchUploads() devuelve datos correctamente cuando se prueba en Postman, por lo que podemos descartar que no se devuelva nada.
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(...);Creo que la confusión gira en torno a que su primer retorno se llame datos. Coincidentemente, las solicitudes de Axios devuelven un objeto con una propiedad llamada datos, que está desestructurando con éxito. No tienen una propiedad llamada winnersData, por lo que const {winnersData} = await axios.get('http://localhost/api/choose-winners', {headers}); es indefinido.
Editar:
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(...);