如何从onCacheEntryAdded生命周期回调向RTK Query useQuery()钩子抛错

要实现通过Socket断开事件触发useQuery的error状态，可以利用React Query的queryCache手动设置查询错误，具体操作如下：

• 在onCacheEntryAdded生命周期回调中，解构获取当前查询的queryKey和queryCache实例
• 给Socket的disconnect事件绑定处理函数，在函数中创建自定义错误，并调用queryCache.setQueryError()将错误关联到当前查询
• 添加清理逻辑，避免Socket监听残留导致内存泄漏

完整代码示例 #

const { isSuccess, data, error } = useQuery({
  queryKey: ['your-target-query'], // 替换为你的查询Key
  queryFn: async () => {
    // 你的常规查询逻辑，比如请求接口或初始化Socket数据
    const res = await fetch('/api/data');
    return res.json();
  },
  async onCacheEntryAdded({ queryKey, queryCache, cacheEntry }) {
    // 定义断开事件处理函数
    const handleSocketDisconnect = (reason) => {
      // 创建带自定义标识的错误
      const disconnectError = new Error(`Socket断开: ${reason}`);
      disconnectError.code = 'SOCKET_DISCONNECT'; // 自定义错误码，方便后续判断
      
      // 手动设置查询错误，触发useQuery的error更新
      queryCache.setQueryError(queryKey, disconnectError);
    };

    // 绑定Socket断开监听
    socket.on('disconnect', handleSocketDisconnect);

    // 缓存条目销毁时清理监听
    cacheEntry.removeListeners.push(() => {
      socket.off('disconnect', handleSocketDisconnect);
    });
  },
});

使用error属性处理断开场景 #

在组件中可以直接通过返回的error属性判断是否是Socket断开错误：

if (error) {
  if (error.code === 'SOCKET_DISCONNECT') {
    return <div>连接已断开，请检查网络后重试</div>;
  }
  return <div>查询出错：{error.message}</div>;
}

补充说明 #

• queryCache.setQueryError()会直接更新对应查询的错误状态，触发组件重新渲染
• 如果需要避免Socket断开后自动重试，可以在useQuery配置中添加retry: (failureCount, err) => err.code !== 'SOCKET_DISCONNECT'
• 务必添加监听清理逻辑，防止组件卸载后Socket监听残留导致内存泄漏

内容的提问来源于stack exchange，提问作者ezik