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

Version History

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