useSuspenseInfiniteQuery

Deprecated in @suspensive/react-query

This hook is now officially supported in TanStack Query v4.40.0+. Since TanStack Query has backported this interface, we are deprecating the backported version from @suspensive/react-query. Please migrate to the official TanStack Query interface:


- import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
+ import { useSuspenseInfiniteQuery } from '@tanstack/react-query'

For more details, see TanStack Query PR #9334 .

Return type of this hook has no isLoading, isError property. because <Suspense/> and <ErrorBoundary/> guarantee the data from this hook. In addition, this hook’s options have default suspense: true, and you can provide new options to this hook like useInfiniteQuery of @tanstack/react-query.


import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
 
const Example = () => {
  const query = useSuspenseInfiniteQuery({
    queryKey,
    queryFn,
  }) // suspense:true is default.
 
  // No need to do type narrowing by isSuccess.
  query.data // InfiniteData<TData>
}

import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
import { useEffect, Fragment } from 'react'
import { getPosts } from './api'

export const PostList = () => {
  const { data, isFetchingNextPage, isFetched, hasNextPage, fetchNextPage } =
    useSuspenseInfiniteQuery({
      queryKey: ['posts'],
      queryFn: ({ pageParam = 1 }) => getPosts(pageParam),
      getNextPageParam: (lastPage, allPages) =>
        lastPage.skip + lastPage.limit < lastPage.total
          ? allPages.length + 1
          : undefined,
    })

  useEffect(() => {
    if (!isFetchingNextPage && isFetched) {
      window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth',
      })
    }
  }, [isFetchingNextPage, isFetched])

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        marginBottom: '100px',
      }}
    >
      <ol>
        {data.pages.map((page, i) => (
          <Fragment key={i}>
            {page.data.map((post) => (
              <li key={post.id} style={{ marginBottom: '10px' }}>
                {post.title}
              </li>
            ))}
          </Fragment>
        ))}
      </ol>
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage
          ? 'Loading more...'
          : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
      </button>
    </div>
  )
}

Open Sandbox

Motivation

If you turn suspense on in @tanstack/react-query, You can use useInfiniteQuery with <Suspense/> and <ErrorBoundary/>.


import { useInfiniteQuery } from '@tanstack/react-query'
 
const Example = () => {
  const query = useInfiniteQuery({
    queryKey,
    queryFn,
    suspense: true,
  })
 
  query.data // InfiniteData<TData> | undefined
 
  if (query.isSuccess) {
    query.data // InfiniteData<TData>
  }
}

but useInfiniteQuery’s return type query.data will always be fulfilled because of <Suspense/> as parent of this component.

This is why @suspensive/react-query provide useSuspenseInfiniteQuery.

Focus on successful cases.

Now we can focus on the component, as data fetching will always succeed.

Version History

Version	Changes
`v3.0.0`	`networkMode` has been fixed to `'always'`. For more details, please refer to the Migration to v3 guide.