Search…

Auto

StartRC

Router

Query

Docs

Partners

React React

Latest

Search…

latest

React React

Latest

React Example: Load More Infinite Scroll

Github StackBlitz CodeSandbox

Code ExplorerCode

Interactive SandboxSandbox

src
- pages
  - api
  - about.tsx
  - index.tsx
.gitignore
README.md
next.config.js
package.json
tsconfig.json

tsx

    import React from 'react'
    import Link from 'next/link'
    import { useInView } from 'react-intersection-observer'
    import {
      useInfiniteQuery,
      QueryClient,
      QueryClientProvider,
    } from '@tanstack/react-query'
    import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

    const queryClient = new QueryClient()

    export default function App() {
      return (
      )
    }

    function Example() {
      const { ref, inView } = useInView()

      const {
        status,
        data,
        error,
        isFetching,
        isFetchingNextPage,
        isFetchingPreviousPage,
        fetchNextPage,
        fetchPreviousPage,
        hasNextPage,
        hasPreviousPage,
      } = useInfiniteQuery({
        queryKey: ['projects'],
        queryFn: async ({
          pageParam,
        }): Promise<{
          data: Array<{ name: string; id: number }>
          previousId: number
          nextId: number
        }> => {
          const response = await fetch(`/api/projects?cursor=${pageParam}`)
          return await response.json()
        },
        initialPageParam: 0,
        getPreviousPageParam: (firstPage) => firstPage.previousId,
        getNextPageParam: (lastPage) => lastPage.nextId,
      })

      React.useEffect(() => {
        if (inView && hasNextPage && !isFetchingNextPage) {
          fetchNextPage()
        }
      }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage])

      return (
          <h1>Infinite Loading</h1>
          {status === 'pending' ? (
            <p>Loading...</p>
          ) : status === 'error' ? (
            <span>Error: {error.message}</span>
          ) : (
            <>
                <button
                  onClick={() => fetchPreviousPage()}
                  disabled={!hasPreviousPage || isFetchingPreviousPage}
                >
                  {isFetchingPreviousPage
                    ? 'Loading more...'
                    : hasPreviousPage
                      ? 'Load Older'
                      : 'Nothing more to load'}
                </button>
              {data.pages.map((page) => (
                  {page.data.map((project) => (
                    <p
                      style={{
                        border: '1px solid gray',
                        borderRadius: '5px',
                        padding: '10rem 1rem',
                        background: `hsla(${project.id * 30}, 60%, 80%, 1)`,
                      }}
                      key={project.id}
                    >
                      {project.name}
                    </p>
                  ))}
                </React.Fragment>
              ))}
                <button
                  ref={ref}
                  onClick={() => fetchNextPage()}
                  disabled={!hasNextPage || isFetchingNextPage}
                >
                  {isFetchingNextPage
                    ? 'Loading more...'
                    : hasNextPage
                      ? 'Load Newer'
                      : 'Nothing more to load'}
                </button>
                {isFetching && !isFetchingNextPage
                  ? 'Background Updating...'
                  : null}
            </>
          )}
          <hr />
      )
    }

[Want to Skip the Docs?

“If you’re serious about really understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg?s=tanstack)