snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

examples/react/infinite-query-with-max-pages/src/pages/api/projects.ts

@@ -0,0 +1,20 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
+  const cursor = parseInt(req.query.cursor) || 0
+  const pageSize = 4
+
+  const data = Array(pageSize)
+    .fill(0)
+    .map((_, i) => {
+      return {
+        name: 'Project ' + (i + cursor) + ` (server time: ${Date.now()})`,
+        id: i + cursor,
+      }
+    })
+
+  const nextId = cursor < 20 ? data[data.length - 1].id + 1 : null
+  const previousId = cursor > -20 ? data[0].id - pageSize : null
+
+  setTimeout(() => res.json({ data, nextId, previousId }), 300)
+}

examples/react/infinite-query-with-max-pages/src/pages/index.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import {
+  QueryClient,
+  QueryClientProvider,
+  useInfiniteQuery,
+} from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+const queryClient = new QueryClient()
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+    </QueryClientProvider>
+  )
+}
+
+function Example() {
+  const {
+    status,
+    data,
+    error,
+    isFetching,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    hasPreviousPage,
+  } = useInfiniteQuery({
+    queryKey: ['projects'],
+    queryFn: async ({ pageParam }) => {
+      const response = await fetch(`/api/projects?cursor=${pageParam}`)
+      return await response.json()
+    },
+    initialPageParam: 0,
+    getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
+    getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
+    maxPages: 3,
+  })
+
+  return (
+    <div>
+      <h1>Infinite Query with max pages</h1>
+      <h3>4 projects per page</h3>
+      <h3>3 pages max</h3>
+      {status === 'pending' ? (
+        <p>Loading...</p>
+      ) : status === 'error' ? (
+        <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.data.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 />
+      <ReactQueryDevtools initialIsOpen />
+    </div>
+  )
+}