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

useSuspenseQueries

์ด hook์˜ return ํƒ€์ž…์—๋Š” isLoading, isError์ด ์—†์Šต๋‹ˆ๋‹ค. <Suspense/> and <ErrorBoundary/>๊ฐ€ ์ด hook์˜ data๋ฅผ ๋ณด์žฅํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ, ์ด hook์˜ options์—๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ suspense๊ฐ€ true์ž…๋‹ˆ๋‹ค. ํ•„์š”ํ•œ ์ƒˆ options๋Š” @tanstack/react-query์˜ useQueries์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

import { useSuspenseQueries } from '@suspensive/react-query'
 
const Example = () => {
  const [query1, query2] = useSuspenseQueries({
    queries: [
      { queryKey: [1], queryFn },
      { queryKey: [2], queryFn },
    ],
  }) // suspense: true๊ฐ€ ๊ธฐ๋ณธ์ž…๋‹ˆ๋‹ค.
 
  // isSuccess์œผ๋กœ type narrowing์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  query1.data // TData
  query2.data // TData
}
import { useSuspenseQueries } from '@suspensive/react-query'
import { getPost, getComments } from './api'

export const Post = ({ postId }: { postId: number }) => {
  const [postQuery, commentQuery] = useSuspenseQueries({
    queries: [
      { queryKey: ['posts', postId], queryFn: () => getPost(postId) },
      { queryKey: ['comments', postId], queryFn: () => getComments(postId) },
    ],
  })

  return (
    <div>
      <h1>{postQuery.data.title}</h1>
      <p>{postQuery.data.body}</p>
      <h2>Comments</h2>
      <ul>
        {commentQuery.data.map((comment) => (
          <li key={comment.id}>{comment.body}</li>
        ))}
      </ul>
    </div>
  )
}

๋™๊ธฐ

@tanstack/react-query useQueries์˜ suspense ์˜ต์…˜์„ ์‚ฌ์šฉํ•˜๋ฉด, useQueries๋ฅผ <Suspense/>, <ErrorBoundary/>์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import { useQueries } from '@tanstack/react-query'
 
const Example = () => {
  const [query1, query2] = useQueries({
    queries: [
      { queryKey: [1], queryFn, suspense: true },
      { queryKey: [2], queryFn, suspense: true },
    ],
  })
 
  query1.data // TData | undefined
  query2.data // TData | undefined
 
  if (query1.isSuccess) {
    query.data // TData
  }
  if (query2.isSuccess) {
    query.data // TData
  }
}

useQueries์˜ return ํƒ€์ž…(query1.data, query2.data)์€ ์ด ์ปดํฌ๋„ŒํŠธ์˜ ๋ถ€๋ชจ์ธ <Suspense/>์™€ <ErrorBoundary/> ๋•๋ถ„์— ํ•ญ์ƒ ์„ฑ๊ณตํ•œ ๊ฒฝ์šฐ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ @tanstack/react-query๋Š” ํƒ€์ž…์ ์œผ๋กœ ์ด๊ฒƒ์„ ํ‘œํ˜„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์ด @suspensive/react-query๊ฐ€ useSuspenseQueries๋ฅผ ์ œ๊ณตํ•˜๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค.

๐Ÿ’ก

์„ฑ๊ณตํ•œ ์ผ€์ด์Šค์— ์ง‘์ค‘ํ•˜์„ธ์š”.

์ด์ œ ์šฐ๋ฆฌ๋Š” ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ fetching์ด ํ•ญ์ƒ ์„ฑ๊ณตํ•˜๋ฏ€๋กœ ์„ฑ๊ณตํ•œ ๊ฒฝ์šฐ์—๋งŒ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.