QueryErrorResetBoundary
TypeScript
1function QueryErrorResetBoundary(props: QueryErrorResetBoundaryProps): Element;定义于:packages/preact-query/src/QueryErrorResetBoundary.tsx:164
当你在查询中使用 suspense 或 throwOnError 时,你需要一种机制,让查询知道:在发生某些错误后重新渲染时,你希望重试。借助 QueryErrorResetBoundary 组件,你可以在该组件的边界内重置任意查询错误。
参数
props
要渲染的 children。
props 属性
| 属性 | 类型 | 描述 |
|---|---|---|
children |
| ComponentChildren | QueryErrorResetBoundaryFunction |
要么是一个普通节点,要么是一个接收边界 QueryErrorResetBoundaryValue 的函数,并返回一个节点。 |
返回值
Element
按原样渲染 children;若 children 是一个函数,则以边界的 QueryErrorResetBoundaryValue 为参数调用该函数。
示例
TypeScript
1import { useErrorBoundary } from 'preact/hooks'2import type { ComponentChildren } from 'preact'3import { QueryErrorResetBoundary } from '@tanstack/preact-query'4 5function App() {6 return (7 <QueryErrorResetBoundary>8 {({ reset }) => (9 <ErrorBoundary reset={reset}>10 <Page />11 </ErrorBoundary>12 )}13 </QueryErrorResetBoundary>14 )15}16 17function ErrorBoundary({18 children,19 reset,20}: {21 children: ComponentChildren22 reset: () => void23}) {24 const [error, resetError] = useErrorBoundary(() => reset())25 26 if (error) {27 return (28 <div>29 There was an error!30 <button onClick={() => resetError()}>Try again</button>31 </div>32 )33 }34 35 return children36}