TanStack Query Preact Query 的 QueryErrorIsResetFunction错误重置边界复位状态判定函数解析【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/queryQueryErrorIsResetFunction是tanstack/preact-query在QueryErrorResetBoundary查询错误重置边界机制中用于判定错误边界是否已被重置且尚未清除的纯函数类型。在 Preact 应用中配合useSuspenseQuery、useSuspenseQueries等 Suspense 查询或throwOnError选项使用错误边界重试时该类型正是驱动“只有用户点击重试后查询才允许再次抛错”这一关键逻辑的判定依据。读完本文你将掌握该类型的精确定义、底层状态机实现reset → isReset → clearReset以及它在查询错误恢复链路中的全部消费点并能在自己的 Preact 组件中正确组合QueryErrorResetBoundary与preact/hooks的错误处理能力。类型签名与语义依据仓库中该类型的官方 API 文档QueryErrorIsResetFunction 类型别名其定义为type QueryErrorIsResetFunction () boolean它接受零个参数返回一个boolean。文档明确给出其语义Returns whether the boundary has been reset and not yet cleared即“返回该边界是否已经被重置、且尚未被清除”。这一判定结果是整个错误重试机制中“是否允许查询再次尝试”的核心输入。从源码看它定义于 packages/preact-query/src/QueryErrorResetBoundary.tsx:15并与其两个“兄弟类型”共同组成错误边界对外暴露的完整操作面类型别名签名语义源码位置QueryErrorResetFunction() void重置边界内任何查询错误让查询知道可以再次尝试QueryErrorResetBoundary.tsx:10QueryErrorIsResetFunction() boolean返回边界是否已被重置且尚未被清除QueryErrorResetBoundary.tsx:15QueryErrorClearResetFunction() void清除重置状态让查询知道在边界再次重置前不要再尝试QueryErrorResetBoundary.tsx:20对应的类型文档可分别参考 QueryErrorResetFunction 与 QueryErrorClearResetFunction。三者共同构成了QueryErrorResetBoundaryValue边界值的三个成员reset、isReset与clearReset见 QueryErrorResetBoundary.tsx:22-35。从类型定义到实际状态机闭包实现的三个原语QueryErrorIsResetFunction描述的是“读”语义真正驱动它变化的是边界内部一段用闭包保存可变布尔量的状态机。在 packages/preact-query/src/QueryErrorResetBoundary.tsx:37-50 中createValue()通过let isReset false保存内部状态并返回三个函数作为该状态的唯一读写通道function createValue(): QueryErrorResetBoundaryValue { let isReset false return { clearReset: () { isReset false }, reset: () { isReset true }, isReset: () { return isReset }, } }由此可见isReset是一个状态谓词reset()把它置为trueclearReset()把它置回false而isReset()仅返回当前布尔值、不做任何副作用。它描述的是边界生命周期中的一段“可重试窗口”——窗口从reset()打开到clearReset()关闭。这份边界状态经由createContext(createValue())建立默认上下文并由QueryErrorResetBoundary组件在挂载时通过useState(() createValue())创建一次、以Provider形式向子树注入QueryErrorResetBoundary.tsx:52-86、159-168。组件与 Hook 的完整用法参见 QueryErrorResetBoundary 函数文档 与 useQueryErrorResetBoundary 函数文档。isReset 在错误恢复链路中的消费点QueryErrorIsResetFunction之所以重要是因为它被 Preact Query 的错误处理核心代码大量读取直接决定“查询错误是否会被抛给错误边界”“失败查询是否在重新挂载时自动重试”。它主要由 packages/preact-query/src/errorBoundaryUtils.ts 消费1. 阻止未经重置的自动重试ensurePreventErrorBoundaryRetry在 errorBoundaryUtils.ts:13-41当suspense或throwOnError生效时如果!errorResetBoundary.isReset()即边界尚未被用户重置就会把options.retryOnMount false从而防止失败查询在组件重新挂载时立刻再次发起请求。这保证了“在用户主动点击重试之前查询不会反复打接口”。2. 判定是否应当抛错getHasError在 errorBoundaryUtils.ts:51-78getHasError把“当前确实有错误”与“边界尚未重置”耦合在一起return ( result.isError !errorResetBoundary.isReset() !result.isFetching query ((suspense result.data undefined) || shouldThrowError(throwOnError, [result.error, query])) )只有当result.isError为真且isReset()返回false时查询错误才会真正被抛出交给错误边界。反过来一旦用户点击重试触发了reset()isReset()返回true重新渲染时getHasError即为假错误不再被抛出查询得以按新的请求重新执行。3. 窗口关闭useClearResetErrorBoundary与fetchOptimistic边界状态需要在恰当的时刻“复位关闭”避免错误被永久抑制errorBoundaryUtils.ts:43-49 的useClearResetErrorBoundary通过useEffect在依赖变更后调用errorResetBoundary.clearReset()把isReset置回false从而让边界重新进入“可感知错误”状态。packages/preact-query/src/suspense.ts:57-76 的fetchOptimistic在预取发生错误时同样回调errorResetBoundary.clearReset()保证本次“乐观 fetch”的失败不会被后续渲染误判为已重置。配合 QueryErrorResetBoundary.tsx:37-50 的状态实现可以归纳出完整生命周期错误抛给边界 → 用户点击“重试”调用reset()isReset变为true→ 查询重试成功后通过clearReset()把isReset恢复为false等待下一次错误。实战组合与 preact/hooks 的 useErrorBoundary 一起使用QueryErrorIsResetFunction本身并非你要直接调用的 API——你在日常开发中接触的是持有它的QueryErrorResetBoundaryValue通过useQueryErrorResetBoundary()获取或作为QueryErrorResetBoundary渲染函数的参数。官方类型文档在其 JSDoc 示例中给出的标准组合模式见 QueryErrorResetBoundary.tsx:56-86如下import { useErrorBoundary } from preact/hooks import type { ComponentChildren } from preact import { useQueryErrorResetBoundary } from tanstack/preact-query function App({ children }: { children: ComponentChildren }) { const { reset } useQueryErrorResetBoundary() const [error, resetError] useErrorBoundary(() reset()) if (error) { return ( div There was an error! button onClick{() resetError()}Try again/button /div ) } return children }这里的关键在于useErrorBoundary(() reset())Preact Hooks 的错误边界在捕获错误时会先执行你传入的回调把 reset 状态置位随后点击 “Try again” 触发重新渲染。因为reset()已令isReset()返回true内部getHasError判定不再成立查询错误便不会被再次抛出。当需要把边界值同时交给子组件时则使用QueryErrorResetBoundary的 render-prop 形态import { useErrorBoundary } from preact/hooks import type { ComponentChildren } from preact import { QueryErrorResetBoundary } from tanstack/preact-query function App() { return ( QueryErrorResetBoundary {({ reset }) ( ErrorBoundary reset{reset} Page / /ErrorBoundary )} /QueryErrorResetBoundary ) } function ErrorBoundary({ children, reset, }: { children: ComponentChildren reset: () void }) { const [error, resetError] useErrorBoundary(() reset()) if (error) { return ( div There was an error! button onClick{() resetError()}Try again/button /div ) } return children }该用法同样出现在 QueryErrorResetBoundary.tsx:119-157 的组件 JSDoc 中并在useSuspenseQuery、useSuspenseQueries、useSuspenseInfiniteQuery的官方文档示例里作为推荐配套方案反复出现参见 useSuspenseQuery.ts:27-71 与 useSuspenseQueries.ts:201-247。测试佐证仓库中针对该机制的测试确认了上述行为模型。packages/preact-query/src/tests/QueryResetErrorBoundary.test.tsx 全文件围绕QueryErrorResetBoundary展开数十个用例验证“重置后错误不再抛出、清除后错误重新可见”等行为而 packages/preact-query/src/tests/useSuspenseQuery.test.tsx 中多处通过const { reset } useQueryErrorResetBoundary()例如 471、627、726、833 行附近构造“点击重试后恢复”的集成场景可作为阅读QueryErrorIsResetFunction全生命周期行为的最佳入门样例。小结QueryErrorIsResetFunction是 TanStack Query Preact 绑定中虽小却关键的一环它以() boolean的类型签名承载“错误边界是否处于可重试窗口”的运行时状态并通过QueryErrorResetBoundaryValue.isReset暴露给查询执行链路。理解它就理解了reset()/isReset()/clearReset()三者协同控制查询错误重试节奏的设计精髓也就能在 Suspense 模式下写出行为正确、可预期的错误恢复 UI。【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/query创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考