An utility function to reset the pagination of an useInfiniteQuery to optimise permormance for @tanstack/react-query. Works with ReactJs, NextJs, React Native.
npm install tanstack-infinite-query-refetchtanstack-infinite-query-refetchA utility function to reset the pagination of an useInfiniteQuery to optimize performance for @tanstack/react-query. This package is compatible with ReactJS, Next.js, and React Native.
To use tanstack-infinite-query-refetch, you need to have @tanstack/react-query installed in your project. Install the package via npm or yarn:
``bash`
npm install tanstack-infinite-query-refetch
#### Import resetInfiniteQueryPagination from the package:
`javascript`
import { QueryClient } from "@tanstack/react-query";
import { resetInfiniteQueryPagination } from "tanstack-infinite-query-refetch";
`javascript`
const handleResetPagination = () => {
const success = resetInfiniteQueryPagination(client, ["myQueryKey"]);
if (success) {
console.log("Pagination reset successfully.");
} else {
console.error("Failed to reset pagination.");
}
};
##### Here’s a basic example of how to use resetInfiniteQueryPagination with @tanstack/react-query:
`javascript
import { useInfiniteQuery } from "@tanstack/react-query";
function Projects() {
const fetchProjects = async ({ pageParam = 0 }) => {
const res = await fetch("/api/projects?cursor=" + pageParam);
return res.json();
};
const {
data,
error,
fetchNextPage,
hasNextPage,
isFetching,
isFetchingNextPage,
status,
} = useInfiniteQuery({
queryKey: ["projects"],
queryFn: fetchProjects,
getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
});
const handleResetPagination = () => {
const success = resetInfiniteQueryPagination(client, ["myQueryKey"]);
if (success) {
console.log("Pagination reset successfully.");
} else {
console.error("Failed to reset pagination.");
}
};
return status === "loading" ? (
Loading...
Error: {error.message}
{project.name}
