useSuspenseQuery

- import { useSuspenseQuery } from '@suspensive/react-query'
+ import { useSuspenseQuery } from '@tanstack/react-query'

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. Any new options you need can be used like @tanstack/react-query’s useQuery .

import { useSuspenseQuery } from '@suspensive/react-query'
 
const Example = () => {
  const query = useSuspenseQuery({
    queryKey,
    queryFn,
  }) // suspense: true is the default.
 
  // No type narrowing required with isSuccess.
  query.data // TData
}

import { useSuspenseQuery } from '@suspensive/react-query'
import { getPost } from './api'

export const Post = ({ postId }: { postId: number }) => {
  const { data } = useSuspenseQuery({
    queryKey: ['posts', postId],
    queryFn: () => getPost(postId),
  })

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  )
}

motivation

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

import { useQuery } from '@tanstack/react-query'
 
const Example = () => {
  const query = useQuery({
    queryKey,
    queryFn,
    suspense: true,
  })
 
  query.data // TData | undefined
 
  if (query.isSuccess) {
    query.data // TData
  }
}

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

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

Version History