paginated queries

Author: nejcrogelsek

README.md

@@ -100,6 +100,10 @@ Dependent query - is dependent on the results of another query.
 
 On react-query heroes page we have displayed different heroes. If we click on the hero, we see `loading` text for a moment. To get rid of that initial loading statement, we can set `initialData` in useSuperHeroData.tsx file. If we refresh detail page, the loading button will show because we don't have any initial data at the start, because we skipped the fetch all super heroes query.
 
+**12. react-query keepPreviousData - Paginated queries**
+
+If we add flag `keepPreviousData` into the useQuery options, when we paginate to next page, the data from the previous page is still displayed till the new data is successfully fetched.
+
 ## Available Scripts
 
 In the project directory, you can run:

db.json

@@ -41,5 +41,39 @@
       "id": "codevolution",
       "courses": ["react", "vue", "angular"]
     }
+  ],
+  "colors": [
+    {
+      "id": 1,
+      "label": "red"
+    },
+    {
+      "id": 2,
+      "label": "blue"
+    },
+    {
+      "id": 3,
+      "label": "green"
+    },
+    {
+      "id": 4,
+      "label": "yellow"
+    },
+    {
+      "id": 5,
+      "label": "black"
+    },
+    {
+      "id": 6,
+      "label": "white"
+    },
+    {
+      "id": 7,
+      "label": "orange"
+    },
+    {
+      "id": 8,
+      "label": "purple"
+    }
   ]
 }

src/pages/PaginatedQueries/PaginatedQueries.tsx

@@ -0,0 +1,51 @@
+import axios from 'axios'
+import { FC, useState } from 'react'
+import { useQuery } from 'react-query'
+
+interface Props {}
+
+const fetchColors = (pageNumber: number) => {
+  return axios.get(`http://localhost:4000/colors?_limit=2&_page=${pageNumber}`)
+}
+
+const PaginatedQueries: FC<Props> = (props: Props) => {
+  const [pageNumber, setPageNumber] = useState<number>(1)
+  const { data, isLoading, isError, error, isFetching } = useQuery(
+    ['colors', pageNumber],
+    () => fetchColors(pageNumber),
+    {
+      keepPreviousData: true,
+    },
+  )
+
+  if (isLoading) {
+    return <h2>Loading...</h2>
+  }
+
+  if (isError && error instanceof Error) {
+    return <h2>{error.message}</h2>
+  }
+  return (
+    <div className="paginated-queries">
+      <h1>PaginatedQueries</h1>
+      {data?.data.map((color: { id: number; label: string }, index: number) => (
+        <div key={index}>
+          <h2>
+            {color.id}. {color.label}
+          </h2>
+        </div>
+      ))}
+      <div>
+        <button onClick={() => setPageNumber((prev) => prev - 1)} disabled={pageNumber === 1}>
+          Prev page
+        </button>
+        <button onClick={() => setPageNumber((prev) => prev + 1)} disabled={pageNumber === 4}>
+          Next page
+        </button>
+        {isFetching && 'loading'}
+      </div>
+    </div>
+  )
+}
+
+export default PaginatedQueries

src/routes/Routes.tsx

@@ -9,6 +9,7 @@ import RQSuperHero from 'pages/RQSuperHero/RQSuperHero'
 import ParallelQueries from 'pages/ParallelQueries/ParallelQueries'
 import DynamicParallelQueries from 'pages/DynamicParallelQueries/DynamicParallelQueries'
 import DependentQueries from 'pages/DependentQueries/DependentQueries'
+import PaginatedQueries from 'pages/PaginatedQueries/PaginatedQueries'
 
 export enum RouteType {
   PUBLIC,
@@ -57,6 +58,11 @@ export const AppRoutes: AppRoute[] = [
     path: '/dependent-queries',
     children: <DependentQueries email="[email protected]" />,
   },
+  {
+    type: RouteType.PUBLIC,
+    path: '/paginated-queries',
+    children: <PaginatedQueries />,
+  },
 ]
 
 const Routes: FC = () => {