I am making calls to an API function that I set up and that works all the time. I have used the same backend API calling on another project and in the same project but on the same page and it works fine. In this instance, however, I believe it is due to my lack of understanding of Promise statements that I am not able to solve this. When I run the code, everything runs normally. The fetcher statement works and returns a map of the different stocks in the database. For now, that is all I want. The console prints out the prices of the stocks, but it does not save it to state, which is what I am doing onSuccess.
const fetchListDocs = async () => {
try {
const queryCollection = query(collection(db, loc));
const snapshot = await getDocs(queryCollection);
// let arr = [];
let retArr = []
let newRetMap = new Map();
snapshot.forEach(async (doc) => {
const docTicker = doc.data().stockTicker
// console.log(doc.data())
// arr.push(doc.data());
if (newRetMap.has(docTicker)) {
//averaging price code here
} else {
newRetMap.set(docTicker, doc.data())
retArr.push(doc.data())
}
});
console.log(retArr)
// newRetMap.entries((value) => {
// retArr.push(value)
// })
// setListDocuments(retArr)
return (retArr);
} catch (error) {
console.log(error);
}
};
const { data: listDocs, status } = useQuery({
queryKey: ["firestoreListDocuments", db],
queryFn: () => fetchListDocs(),
onSettled: (dataCollection) => {
console.log(dataCollection)
let newArr = []
dataCollection.forEach(async doc => {
const price = await getStockPrice(doc.stockTicker)
// .then((result) => result)
console.log(price)
newArr.push(Promise.resolve(price))
})
setListDocuments(newArr)
return newArr
}
});
I am using React Query for the query client. It is running on NextJs 12. Any help would be appreciated.
