๐Ÿ‘€ Suspensive v2์—์„œ์˜ ๋ณ€๊ฒฝ์„ ํ™•์ธํ•˜์„ธ์š”. ๋”๋ณด๊ธฐ โ†’
๋ฌธ์„œ๋ณด๊ธฐ@suspensive/react-query<SuspenseQueries/>

SuspenseQueries

<SuspenseQuery/>๊ฐ€ useSuspenseQuery๋ฅผ jsx์—์„œ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•˜๊ฒŒ ํ•˜๋Š” ์—ญํ• ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ <SuspenseQueries/>๋Š” useSuspenseQueries๋ฅผ 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>
  )
}