El objeto Axios no tiene una propiedad winnersData , por lo que desestructurarlo devuelve undefined en el bloque original de ocde. Necesito desestructurar los datos de ambas solicitudes de Axios y lo que llamo más adelante debe ser diferente. Simplemente no estoy seguro de cómo implementar esto y he estado luchando por un tiempo. Mi intento a continuación también falla.
¿Cómo puedo implementar esto?
Bloque de código original:
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(....); Intento de solución para fetchWinners() Lo intenté pero falló:
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 undefinedParece que useQuery siempre devuelve una propiedad llamada datos, por lo que solo necesita cambiarle el nombre (lo mismo para el retorno de axios). Y no olvide esperar la llamada de axios.
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);