nextPage and prevPage params aren't updating.
import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
import { useState } from "react";
import fetchPage from "../utility/fetchPage";
const MainPage = () => {
const [pgNum, setPgNum] = useState<number>(0);
const handlePrevClick = () => {
setPgNum((prev) => (prev > 0 ? prev - 1 : 0));
if (!isFetchingPreviousPage && !hasPreviousPage) {
fetchPreviousPage();
}
};
const handleNextClick = () => {
setPgNum((prev) => (prev < 99 ? prev + 1 : 99));
if (!isFetchingNextPage && !hasNextPage) {
fetchNextPage();
}
};
const {
fetchNextPage,
fetchPreviousPage,
hasNextPage,
hasPreviousPage,
isFetchingNextPage,
isFetchingPreviousPage,
data,
error,
status,
} = useInfiniteQuery({
queryKey: ["infos", pgNum],
queryFn: fetchPage,
initialPageParam: 0,
getPreviousPageParam: (firstPage) => firstPage.prevPage ?? undefined,
getNextPageParam: (lastPage) => lastPage.nextPage ?? undefined,
maxPages: 99,
placeholderData: keepPreviousData,
});
return status === "pending" ? (
<div>Loading...</div>
) : status === "error" ? (
<div>{error.message}</div>
) : (
<div>
<div>
<table>
<tbody>
{data?.pages?.map((page, pageIndex) =>
page?.items
?.filter(
(item) => item.id > pgNum * 10 && item.id <= (pgNum + 1) * 10
)
.map((item, idx) => (
<tr key={idx + pageIndex}>
<td>{item.id}</td>
...
</tr>
))
)}
</tbody>
</table>
</div>
<div>
<button onClick={handlePrevClick}>Previous page</button>
<button>Page {pgNum + 1}</button>
<button onClick={handleNextClick}>Next</button>
</div>
</div>
);
};
export default MainPage;
import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
import { useState } from "react";
import fetchPage from "../utility/fetchPage";
const MainPage = () => {
const [pgNum, setPgNum] = useState<number>(0);
const handlePrevClick = () => {
setPgNum((prev) => (prev > 0 ? prev - 1 : 0));
if (!isFetchingPreviousPage && !hasPreviousPage) {
fetchPreviousPage();
}
};
const handleNextClick = () => {
setPgNum((prev) => (prev < 99 ? prev + 1 : 99));
if (!isFetchingNextPage && !hasNextPage) {
fetchNextPage();
}
};
const {
fetchNextPage,
fetchPreviousPage,
hasNextPage,
hasPreviousPage,
isFetchingNextPage,
isFetchingPreviousPage,
data,
error,
status,
} = useInfiniteQuery({
queryKey: ["infos", pgNum],
queryFn: fetchPage,
initialPageParam: 0,
getPreviousPageParam: (firstPage) => firstPage.prevPage ?? undefined,
getNextPageParam: (lastPage) => lastPage.nextPage ?? undefined,
maxPages: 99,
placeholderData: keepPreviousData,
});
return status === "pending" ? (
<div>Loading...</div>
) : status === "error" ? (
<div>{error.message}</div>
) : (
<div>
<div>
<table>
<tbody>
{data?.pages?.map((page, pageIndex) =>
page?.items
?.filter(
(item) => item.id > pgNum * 10 && item.id <= (pgNum + 1) * 10
)
.map((item, idx) => (
<tr key={idx + pageIndex}>
<td>{item.id}</td>
...
</tr>
))
)}
</tbody>
</table>
</div>
<div>
<button onClick={handlePrevClick}>Previous page</button>
<button>Page {pgNum + 1}</button>
<button onClick={handleNextClick}>Next</button>
</div>
</div>
);
};
export default MainPage;
2 Replies
other-emeraldOP•2y ago
interface MOCK_DATA {
id: number;
first_name: string;
last_name: string;
email: string;
gender: string;
ip_address: string;
}
const fetchPage = async ({
pageParam,
}: {
pageParam: number;
}): Promise<{
items: MOCK_DATA[];
currentPage: number;
nextPage: number | null;
prevPage: number | null;
}> => {
console.log("Current Page Param -> ", pageParam);
const res = await fetch("/api", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ currentPage: pageParam }),
});
const collectedData = await res.json();
return {
items: collectedData,
currentPage: pageParam + 1,
nextPage: pageParam + 2 < 99 ? pageParam + 2 : null,
prevPage: pageParam != 0 ? pageParam - 1 : null,
};
};
export default fetchPage;
interface MOCK_DATA {
id: number;
first_name: string;
last_name: string;
email: string;
gender: string;
ip_address: string;
}
const fetchPage = async ({
pageParam,
}: {
pageParam: number;
}): Promise<{
items: MOCK_DATA[];
currentPage: number;
nextPage: number | null;
prevPage: number | null;
}> => {
console.log("Current Page Param -> ", pageParam);
const res = await fetch("/api", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ currentPage: pageParam }),
});
const collectedData = await res.json();
return {
items: collectedData,
currentPage: pageParam + 1,
nextPage: pageParam + 2 < 99 ? pageParam + 2 : null,
prevPage: pageParam != 0 ? pageParam - 1 : null,
};
};
export default fetchPage;
xenial-black•2y ago
you don't need to manage
pagenum manually with an infinite query. it's also not right to have it part of the queryKey