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>
)