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-queryMotivation
With the <QueryErrorResetBoundary/> (opens in a new tab) 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>
)