👀 Check out the changes in Suspensive v2. read more →
Documentation@suspensive/react-query<QueryErrorBoundary/>

QueryErrorBoundary

@suspensive/react-query provide <QueryErrorBoundary/> to reduce repeating implementation like using <QueryErrorResetBoundary/> + <ErrorBoundary/>.

You can just use <QueryErrorBoundary/> like using <ErrorBoundary/>. All other features are same with original <ErrorBoundary/> of @suspensive/react without resetting react-query’s error.

import { QueryErrorBoundary } from '@suspensive/react-query'
 
const Example = () => (
  <QueryErrorBoundary
    fallback={(props) => (
      <>
        <button onClick={props.reset}>Try again</button>
        {props.error.message}
      </>
    )}
  >
    <Page />
  </QueryErrorBoundary>
)

peerDependency

<QueryErrorBoundary/> have peerDependency on @suspensive/react’s <ErrorBoundary/>. So if you want to use these, you must install @suspensive/react first.

npm install @suspensive/react @suspensive/react-query

Motivation

With the <QueryErrorResetBoundary/> component you can reset any query errors within the boundaries of the component. but If you use react-query with suspense continuously, Continuous repeating to use <QueryErrorResetBoundary/> + <ErrorBoundary/> will be coded.

<QueryErrorResetBoundary/> + <ErrorBoundary/>

import { ErrorBoundary } from '@suspensive/react'
import { QueryErrorResetBoundary } from '@tanstack/react-query'
 
const Example = () => (
  <QueryErrorResetBoundary>
    {({ reset }) => (
      <ErrorBoundary
        onReset={reset}
        fallback={(props) => (
          <>
            <button onClick={props.reset}>Try again</button>
            {props.error.message}
          </>
        )}
      >
        <Page />
      </ErrorBoundary>
    )}
  </QueryErrorResetBoundary>
)
<QueryClientConsumer/>Why need to use?