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 { PostListItem } from '~/components'
 
const InfinitePostsPage = ({ userId }) => (
  <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
    <Suspense fallback="loading...">
      <SuspenseInfiniteQuery {...postsInfiniteQueryOptions(userId)}>
        {({ data, fetchNextPage }) => (
          <>
            {data.pages.map((post) => (
              <PostListItem {...post} />
            ))}
            <button
              type="button"
              onClick={() => {
                fetchNextPage()
              }}
            >
              Load More
            </button>
          </>
        )}
      </SuspenseInfiniteQuery>
    </Suspense>
  </ErrorBoundary>
)

import React from 'react'
import { SuspenseInfiniteQuery } from '@suspensive/react-query'
import { Suspense, ErrorBoundary } from '@suspensive/react'
import { PostListItem } from './PostListItem'
import { postsInfiniteQueryOptions } from './queries'

export const Example = () => {
  return (
    <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
      <Suspense fallback={<div>Loading...</div>}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            marginBottom: '50px',
          }}
        >
          <SuspenseInfiniteQuery
            {...postsInfiniteQueryOptions()}
            getNextPageParam={(lastPage, allPages) => {
              return lastPage.skip + lastPage.limit < lastPage.total
                ? allPages.length + 1
                : undefined
            }}
          >
            {({
              data: { pages },
              fetchNextPage,
              hasNextPage,
              isFetchingNextPage,
              isFetched,
            }) => (
              <>
                <ol>
                  {pages.map((page) =>
                    page.data.map((post) => (
                      <PostListItem key={post.id} {...post} />
                    ))
                  )}
                </ol>
                <button
                  onClick={() => fetchNextPage()}
                  disabled={!hasNextPage || isFetchingNextPage}
                >
                  {isFetchingNextPage
                    ? 'Loading more...'
                    : hasNextPage
                      ? 'Load More'
                      : 'Nothing more to load'}
                </button>
              </>
            )}
          </SuspenseInfiniteQuery>
        </div>
      </Suspense>
    </ErrorBoundary>
  )
}

Open Sandbox