I am getting data from API using useQuery when I load the page data is returned, But when I refresh the page data is gone any idea why?
const { isLoading, data } = useQuery("page-data", () => {
return api.get(`/landing_pages/204`);
});
useEffect(() => {
console.log("Page data", data); // when I refresh the page its undefined
}, [])
The data is undefined as long as your query is loading.
Your useEffect has an empty dependency array, so it is executed only one single time when the component gets mounted, but not when it is updated.
But data will be defined on the consecutive rendering only, thus when the component gets updated.
So to access it inside of the useEffect, you have to add the isLoading as a dependency and check for the loading to be completed.
useEffect(() => {
if(!isLoading){
console.log("Page data", data); // when I refresh the page its undefined
}
}, [isLoading])