👀 Check out the changes in Suspensive v2 read more →
Documentation
@suspensive/react-query
<SuspenseInfiniteQuery/>

SuspenseInfiniteQuery

Just as <SuspenseQuery/> makes useSuspenseQuery easier to use in jsx, <SuspenseInfiniteQuery/> serves to make useSuspenseInfiniteQuery easier to use in jsx.

import { SuspenseInfiniteQuery } from '@suspensive/react-query'
import { Suspense, ErrorBoundary } from '@suspensive/react'
import { PostItem } from '~/components'
 
const InfinitePostsPage = ({ authorId }) => (
  <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
    <Suspense fallback="loading...">
      <SuspenseInfiniteQuery {...postsInfiniteQueryOptions(authorId)}>
        {({ data, fetchNextPage }) => (
          <>
            {data.pages.map((post) => (
              <PostItem {...post} />
            ))}
            <button
              type="button"
              onClick={() => {
                fetchNextPage()
              }}
            >
              more
            </button>
          </>
        )}
      </SuspenseInfiniteQuery>
    </Suspense>
  </ErrorBoundary>
)