Add max-pages example

Author: markerikson

examples/query/react/infinite-queries/src/App.tsx

@@ -6,6 +6,7 @@ import {
   InfiniteScrollExample,
   InfiniteScrollAbout,
 } from "./features/infinite-scroll/InfiniteScrollExample"
+import { InfiniteScrollMaxPagesExample } from "./features/max-pages/InfiniteScrollMaxExample"
 
 const Menu = () => {
   return (
@@ -18,6 +19,9 @@ const Menu = () => {
         <li>
           <Link to="/infinite-scroll">Infinite Scroll</Link>
         </li>
+        <li>
+          <Link to="/infinite-scroll-max">Infinite Scroll + max pages</Link>
+        </li>
       </ul>
     </div>
   )
@@ -27,7 +31,7 @@ const App = () => {
   return (
     <BrowserRouter>
       <div className="App">
-        <h1>Infinite Query Examples</h1>
+        <h1>RTKQ Infinite Query Example Showcase</h1>
         <Routes>
           <Route path="/" element={<Menu />} />
           <Route path="/pagination" element={<PaginationExample />} />
@@ -36,6 +40,10 @@ const App = () => {
             path="/infinite-scroll/about"
             element={<InfiniteScrollAbout />}
           />
+          <Route
+            path="/infinite-scroll-max"
+            element={<InfiniteScrollMaxPagesExample />}
+          />
         </Routes>
       </div>
     </BrowserRouter>

examples/query/react/infinite-queries/src/features/max-pages/InfiniteScrollMaxExample.tsx

@@ -0,0 +1,85 @@
+import React from "react"
+import { apiWithInfiniteScrollMax } from "./infiniteScrollApi"
+
+export const InfiniteScrollMaxPagesExample = () => {
+  const {
+    data,
+    error,
+    fetchNextPage,
+    fetchPreviousPage,
+    // hasNextPage,
+    isFetchingNextPage,
+    isFetching,
+    isError,
+  } =
+    apiWithInfiniteScrollMax.endpoints.getProjectsCursorMax.useInfiniteQuery(
+      "projects",
+    )
+
+  // TODO This should be built in to RTKQ
+  const hasNextPage = data?.pages[data.pages.length - 1].nextId !== null
+  const hasPreviousPage = data?.pages[0].previousId !== null
+
+  return (
+    <div>
+      <h2>Infinite Query with max pages</h2>
+      <h3>3 pages max</h3>
+      {isFetching ? (
+        <p>Loading...</p>
+      ) : isError ? (
+        <span>Error: {error.message}</span>
+      ) : (
+        <>
+          <div>
+            <button
+              onClick={() => fetchPreviousPage()}
+              disabled={!hasPreviousPage /* || isFetchingPreviousPage*/}
+            >
+              {
+                /*isFetchingPreviousPage
+                  ? 'Loading more...'
+                  :*/ hasPreviousPage ? "Load Older" : "Nothing more to load"
+              }
+            </button>
+          </div>
+          {data?.pages.map(page => (
+            <React.Fragment key={page.nextId}>
+              {page.projects.map(project => (
+                <p
+                  style={{
+                    border: "1px solid gray",
+                    borderRadius: "5px",
+                    padding: "8px",
+                    fontSize: "14px",
+                    background: `hsla(${project.id * 30}, 60%, 80%, 1)`,
+                  }}
+                  key={project.id}
+                >
+                  {project.name}
+                </p>
+              ))}
+            </React.Fragment>
+          ))}
+          <div>
+            <button
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage /* || isFetchingNextPage*/}
+            >
+              {isFetchingNextPage
+                ? "Loading more..."
+                : hasNextPage
+                  ? "Load Newer"
+                  : "Nothing more to load"}
+            </button>
+          </div>
+          <div>
+            {isFetching && !isFetchingNextPage
+              ? "Background Updating..."
+              : null}
+          </div>
+        </>
+      )}
+      <hr />
+    </div>
+  )
+}

examples/query/react/infinite-queries/src/features/max-pages/infiniteScrollApi.ts

@@ -0,0 +1,32 @@
+import { baseApi } from "../baseApi"
+
+type Project = {
+  id: number
+  name: string
+}
+
+type ProjectsPageCursor = {
+  projects: Project[]
+  nextId: number | null
+  previousId: number | null
+}
+
+export const apiWithInfiniteScrollMax = baseApi.injectEndpoints({
+  endpoints: build => ({
+    getProjectsCursorMax: build.infiniteQuery<
+      ProjectsPageCursor,
+      string,
+      number
+    >({
+      query: page => `https://example.com/api/projectsCursor?cursor=${page}`,
+      infiniteQueryOptions: {
+        initialPageParam: 0,
+        maxPages: 3,
+        getPreviousPageParam: firstPage => firstPage.previousId ?? undefined,
+        getNextPageParam: lastPage => lastPage.nextId ?? undefined,
+      },
+    }),
+  }),
+})
+
+// export const { useGetProjectsQuery } = apiWithPagination

examples/query/react/infinite-queries/src/mocks/handlers.ts

@@ -53,12 +53,14 @@ export const handlers = [
           }
         })
 
-      const nextId =
-        cursor < totalItems - pageSize
-          ? projects[projects.length - 1].id + 1
-          : null
+      const hasNext = cursor < totalItems - pageSize
+      const nextId = hasNext ? projects[projects.length - 1].id + 1 : null
+
+      // Prevent negative cursors
+      const hasPrevious = cursor > -(totalItems - pageSize)
+      const maybePrevCursor = projects[0].id - pageSize
       const previousId =
-        cursor > -(totalItems - pageSize) ? projects[0].id - pageSize : null
+        hasPrevious && maybePrevCursor >= 0 ? maybePrevCursor : null
 
       return HttpResponse.json({
         projects,