useSuspenseQueries

There is no isLoading or isError in the return type of this hook. This is because <Suspense/> and <ErrorBoundary/> guarantee the data of this hook. Also, in the options of this hook, suspense is set to true by default. You can use @tanstack/react-query’s useQueries for the new options you need.


import { useSuspenseQueries } from '@suspensive/react-query'
 
const Example = () => {
  const [query1, query2] = useSuspenseQueries({
    queries: [
      { queryKey: [1], queryFn },
      { queryKey: [2], queryFn },
    ],
  }) // suspense: true is the default.
 
  // No type narrowing required with isSuccess.
  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

Motivation

You can use useQueries with <Suspense/> and <ErrorBoundary/> by using the suspense option of @tanstack/react-query useQueries.


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

The return type of useQueries (query1.data, query2.data) will always be a success case thanks to this component’s parents, <Suspense/> and <ErrorBoundary/>. But @tanstack/react-query doesn’t express this typologically.

That’s why @suspensive/react-query provides useSuspenseQueries.

💡

Focus on successful cases.

Now we can focus only on successful cases as fetching always succeeds inside our component.