T
TanStack3y ago
fascinating-indigo

useInfiniteQuery error

This is an error that occurs when implementing infinite scrolling. It seems to occur because undefined cases cannot be handled when initially loading data. When you refresh, the data is loaded normally. To handle this part, I tried giving an option or using a try catch syntax, but it didn't work. This error suddenly occurred one day after writing the code and confirming that it was working properly.
const fetchStores = async ({ pageParam = 1 }) => {
const { data } = await axios("/api/stores?page=" + pageParam, {
params: {
limit: 10,
page: pageParam,
},
});

return data;
};


const {
data: stores,
isFetching,
fetchNextPage,
isFetchingNextPage,
hasNextPage,
isError,
isLoading,
error,
} = useInfiniteQuery({
queryKey: ["stores"],
queryFn: fetchStores,
initialPageParam: 1,
getNextPageParam: (lastPage, allPages, lastPageParam) => {
if (lastPage.data?.length === 0 || lastPage === undefined) {
return undefined;
}
console.log("lastpage", lastPage);
return lastPageParam + 1;
},
});
const fetchStores = async ({ pageParam = 1 }) => {
const { data } = await axios("/api/stores?page=" + pageParam, {
params: {
limit: 10,
page: pageParam,
},
});

return data;
};


const {
data: stores,
isFetching,
fetchNextPage,
isFetchingNextPage,
hasNextPage,
isError,
isLoading,
error,
} = useInfiniteQuery({
queryKey: ["stores"],
queryFn: fetchStores,
initialPageParam: 1,
getNextPageParam: (lastPage, allPages, lastPageParam) => {
if (lastPage.data?.length === 0 || lastPage === undefined) {
return undefined;
}
console.log("lastpage", lastPage);
return lastPageParam + 1;
},
});
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?