From 23bd5640c37a7e85c8702372861950f3418294bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20S=C5=82odziak?= Date: Wed, 30 Nov 2022 19:42:19 +0100 Subject: [PATCH] docs(examples/react): fix prefetch pagination logic when trying to quickly get to the last page (#4564) * 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. * bugfix/pagination-example-fetch-next-page: update useEffect dependency array to reflect all used variables --- examples/react/pagination/pages/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/react/pagination/pages/index.js b/examples/react/pagination/pages/index.js index 7d0a4436f4..1e77844f40 100644 --- a/examples/react/pagination/pages/index.js +++ b/examples/react/pagination/pages/index.js @@ -35,12 +35,12 @@ function Example() { // Prefetch the next page! React.useEffect(() => { - if (data?.hasMore) { + if (!isPreviousData && data?.hasMore) { queryClient.prefetchQuery(['projects', page + 1], () => fetchProjects(page + 1), ) } - }, [data, page, queryClient]) + }, [data, isPreviousData, page, queryClient]) return (