TanStack React Query新版本如何替代onSuccess/onError回调？

TanStack Query（原React Query）v4及以后版本确实移除了useQuery配置项中的onSuccess和onError回调，但不需要自行编写async try/catch来处理错误——框架依然会自动捕获请求的异常并更新状态。以下是几种替代实现方式：

1. 使用useEffect监听状态变化（推荐） #

这是最直接的组件内替代方案，通过监听isSuccess/data、isError/error状态的变化来触发对应逻辑，完全契合React的状态驱动模式：

旧版（React Query v3及更早）代码 #

const { data, isLoading } = useQuery("my_key", myFunctionThatReturnsPromise, {
  onSuccess: (data) => {
    // 原成功逻辑：比如更新本地状态、通知用户
    console.log("请求成功，数据：", data);
  },
  onError: (error) => {
    // 原错误逻辑：比如提示错误信息、上报异常
    console.error("请求失败，错误：", error);
  },
});

新版替代代码 #

import { useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';

const { data, error, isLoading, isSuccess, isError } = useQuery(
  ["my_key"],
  myFunctionThatReturnsPromise
);

// 模拟原onSuccess逻辑
useEffect(() => {
  if (isSuccess && data) {
    console.log("请求成功，数据：", data);
    // 这里编写原onSuccess中的业务逻辑
  }
}, [isSuccess, data]);

// 模拟原onError逻辑
useEffect(() => {
  if (isError && error) {
    console.error("请求失败，错误：", error);
    // 这里编写原onError中的业务逻辑
  }
}, [isError, error]);

2. 全局监听查询状态（适合全局场景） #

如果需要在全局范围内处理特定查询的成功/错误逻辑，可以使用queryClient的subscribeQueries方法，监听指定key的查询状态变化：

import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

queryClient.subscribeQueries({
  predicate: (query) => query.queryKey[0] === "my_key",
  onChange: (query) => {
    if (query.state.status === "success") {
      // 全局成功逻辑
      console.log("全局捕获请求成功：", query.state.data);
    } else if (query.state.status === "error") {
      // 全局错误逻辑
      console.error("全局捕获请求失败：", query.state.error);
    }
  },
});

关键说明 #

• 无需手动编写try/catch：TanStack Query会自动捕获异步请求的异常，并将错误信息存入error状态，同时标记isError为true。
• 状态驱动更清晰：将副作用逻辑与状态监听绑定，符合React的生命周期规范，避免了回调式逻辑的分散。

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