Skip to Content
👀 Check out the changes in Suspensive v3. read more
Documentation@suspensive/react-queryuseSuspenseQuery

useSuspenseQuery

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.

💡

Focus on successful cases.

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

Version History

VersionChanges
v3.0.0networkMode has been fixed to 'always'. For more details, please refer to the Migration to v3 guide.
Last updated on