react-query中onError已废弃，替代方案及组件内使用错误结果的方法

React Query v5 废弃原有的onSuccess/onError/onSettled配置项后，要在组件内获取错误结果，主要有两种直接可行的方式：

1. 直接读取useQuery返回的状态值 #

这是最直观的方案，useQuery会直接返回请求的错误状态和具体错误对象，你可以在组件内直接使用：

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

function MyComponent() {
  const { data, error, isError } = useQuery({
    queryKey: ['target-data'],
    queryFn: () => fetch('/api/target').then(res => res.json()),
  });

  // 根据错误状态渲染提示
  if (isError) {
    return <div>请求失败：{error.message}</div>;
  }

  if (!data) {
    return <div>加载中...</div>;
  }

  return <div>返回数据：{JSON.stringify(data)}</div>;
}

• isError：布尔值，标记当前请求是否出错
• error：错误对象，包含具体报错信息（类型为Error | null）

2. 结合回调逻辑与组件内状态 #

如果需要在请求出错时执行额外逻辑（比如错误上报），同时在组件内保留错误状态，可以配合全局/局部回调实现：

单Query局部回调 #

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

function MyComponent() {
  const { data, error, isError } = useQuery({
    queryKey: ['target-data'],
    queryFn: () => fetch('/api/target').then(res => res.json()),
    // 替代原onError的局部回调，可用于错误上报等操作
    retry: (failureCount, err) => {
      console.error('请求失败', err);
      // 控制重试次数，返回false则停止重试
      return failureCount < 2;
    },
  });

  // 组件内依然通过error和isError展示错误
  if (isError) {
    return <div>请求出错：{error.message}</div>;
  }

  return <div>{data && JSON.stringify(data)}</div>;
}

全局统一错误处理 #

如果希望所有请求的错误都执行统一逻辑（比如全局错误弹窗），可在初始化QueryClient时配置，组件内依然能获取当前请求的错误：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // 全局错误处理逻辑
      onError: (err) => {
        console.error('全局请求错误', err);
        // 这里可以添加全局错误提示逻辑
      },
    },
  },
});

// 根组件包裹
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

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