SuspenseQueries

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


import { SuspenseQueries } from '@suspensive/react-query' import { Suspense, ErrorBoundary } from '@suspensive/react' import { PostListItem, UserProfile } from '~/components'   const PostsPage = ({ userId }) => (  <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>  <Suspense fallback="loading...">  <SuspenseQueries  queries={[userQueryOptions(userId), postsQueryOptions(userId)]}  >  {([{ data: user }, { data: posts }]) => (  <>  {<UserProfile {...user} />}  {posts.map((post) => (  <PostListItem key={post.id} {...post} />  ))}  </>  )}  </SuspenseQueries>  </Suspense>  </ErrorBoundary> )

import { useState } from 'react' import { SuspenseQueries } from '@suspensive/react-query' import { Suspense, ErrorBoundary } from '@suspensive/react' import { PostListItem } from './PostListItem' import { UserProfile } from './UserProfile' import { userQueryOptions, postsQueryOptions } from './queries' export const Example = () => { const [userId, setUserId] = useState(1) return ( <ErrorBoundary fallback={({ error }) => <>{error.message}</>}> <button onClick={() => setUserId((id) => id - 1)} disabled={userId === 1}> Previous User </button> <button onClick={() => setUserId((id) => id + 1)} disabled={userId === 10} > Next User </button> <Suspense fallback={<div>Loading...</div>}> <SuspenseQueries queries={[userQueryOptions(userId), postsQueryOptions(userId)]} > {([{ data: user }, { data: posts }]) => ( <> <UserProfile {...user} /> <ol> {posts.map((post) => ( <PostListItem key={post.id} {...post} /> ))} </ol> </> )} </SuspenseQueries> </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.