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

Open Sandbox

동기

@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이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다.