用途:整理 TanStack Query 在加载、空数据、陈旧数据、后台错误、重试、Toast、throwOnError 与 Error Boundary 场景下的状态与错误处理模式。
主要能力: 优先数据渲染。后台刷新失败可能同时出现 isError 与已有 data,此时应先渲染已有数据,避免把已渲染内容抹掉。示例:先用 todos.data 渲染列表并传 isRefreshing={todos.isFetching},再依次处理 isPending、isError。 throwOnError 控制错误交给渲染期 Error Boundary。可按错误状态筛选,例如 throwOnError: (error) => error.status >= 500。 全局缓存回调做跨组件通知。用 QueryCache 的 onError,仅在 query.state.data !== undefined 时弹出 Toast。
常见错误: 后台错误时隐藏陈旧数据:错误的做法是先判断 isError 再判断 data;正确做法是优先渲染 data,并把 isError 作为附带信息传入。 把校验错误交给全局边界:突变应让 4xx 在表单附近处理,仅把意外服务端错误交给边界,例如 throwOnError: (error) => error.status >= 500。 每个观察者重复弹 Toast:观察者级 onError 会在多组件间重复触发,全局副作用应改用缓存级回调。
使用方式:在 useQuery / useMutation 中配合 queryKey、queryFn 使用,必要时设置 throwOnError;在创建 QueryClient 时传入 queryCache: new QueryCache({ onError })。
限制:资料未提供安装命令、版本要求、具体平台或收费信息。