From 390598a9c418ce5174162a798614d9c898ba60d7 Mon Sep 17 00:00:00 2001 From: Wojciech Slodziak Date: Mon, 28 Nov 2022 15:44:01 +0100 Subject: [PATCH 1/2] bugfix/pagination-example-fetch-next-page: fix basing decision whether next page should be refetched on information from two pages prior In the useQuery call we set "keepPreviousData", so we must make sure that for fetching the next page we don't base our logic on the data from potentially two pages away. If user would click very fast to get to the last page we would potentially load eleventh page and that could result in an error depending on the backend implementation. --- examples/react/pagination/pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/react/pagination/pages/index.js b/examples/react/pagination/pages/index.js index 7d0a4436f4..0454727540 100644 --- a/examples/react/pagination/pages/index.js +++ b/examples/react/pagination/pages/index.js @@ -35,7 +35,7 @@ function Example() { // Prefetch the next page! React.useEffect(() => { - if (data?.hasMore) { + if (!isPreviousData && data?.hasMore) { queryClient.prefetchQuery(['projects', page + 1], () => fetchProjects(page + 1), ) From 2afbc65e21582433fba6e32c48b4867125400f35 Mon Sep 17 00:00:00 2001 From: Wojciech Slodziak Date: Wed, 30 Nov 2022 14:47:52 +0100 Subject: [PATCH 2/2] bugfix/pagination-example-fetch-next-page: update useEffect dependency array to reflect all used variables --- examples/react/pagination/pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/react/pagination/pages/index.js b/examples/react/pagination/pages/index.js index 0454727540..1e77844f40 100644 --- a/examples/react/pagination/pages/index.js +++ b/examples/react/pagination/pages/index.js @@ -40,7 +40,7 @@ function Example() { fetchProjects(page + 1), ) } - }, [data, page, queryClient]) + }, [data, isPreviousData, page, queryClient]) return (