Framework
Version
Menu
Getting Started
Guides & Concepts
Community Resources
API Reference
ESLint
Plugins
Examples

Suspensive React Query

Typesafe useQuery, useQueries, useInfiniteQuery with default suspense option.

Use @suspensive/react-query, delegate loading and error handling to the outside of the component with useSuspenseQuery, useSuspenseQueries and useSuspenseInfiniteQuery, and focus on success inside the component.

You don't even need to use the isSuccess flag.

Installation

You can install @suspensive/react-query via NPM.

bash
$ npm i @suspensive/react-query
# or
$ pnpm add @suspensive/react-query
# or
$ yarn add @suspensive/react-query
$ npm i @suspensive/react-query
# or
$ pnpm add @suspensive/react-query
# or
$ yarn add @suspensive/react-query

Motivation

If you turn suspense mode on in @tanstack/react-query, You can use useQuery with Suspense and ErrorBoundary.

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

Typically query.data will be TData | undefined like this code example.

But actual useQuery's return type:query.data will be always fulfilled because of Suspense and ErrorBoundary as parent of this component.

This is why @suspensive/react-query provide useSuspenseQuery

useSuspenseQuery

Return type of this hook have no isLoading, isError property. because Suspense and ErrorBoundary will guarantee this hook's data.

In addition, this hook's options have default suspense: true. and you can provide new options to this hook like useQuery of @tanstack/react-query.

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

const Example = () => {
  const query = useSuspenseQuery({
    queryKey,
    queryFn,
  }) // suspense:true is default.

  // No need to do type narrowing by isSuccess
  query.data // TData
}
import { useSuspenseQuery } from '@suspensive/react-query'

const Example = () => {
  const query = useSuspenseQuery({
    queryKey,
    queryFn,
  }) // suspense:true is default.

  // No need to do type narrowing by isSuccess
  query.data // TData
}

Concentrate on only Success

Now, we can concentrate component as any fetching will be always success in component.

useSuspenseQuery is Official API now! (from v5)

@suspensive/react-query provides not only useSuspenseQuery, also useSuspenseQueries, useSuspenseInfiniteQuery. From @tanstack/react-query v5 provides official public hook apis for suspense like @suspensive/react-query's hooks. If want to use them early in v4, use this @suspensive/react-query first.

Check the complete documentation on Suspensive Official Docs Site and also welcome Pull Request on Suspensive GitHub

Want to Skip the Docs?
Query.gg - The Official React Query Course
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner Linsley
Check it out