react-query useMutation错误处理失效，@tanstack版本正常求解决

问题根源 #

你在onError回调里手动抛出了新错误，这会导致错误跳出react-query的错误处理流程，直接触发全局错误（比如React错误边界或控制台报错）。而@tanstack/react-query（v4+）对错误处理逻辑做了调整，默认不会让onError里的抛出错误冒泡。

解决方案 #

1. 移除onError中的错误抛出 #

onError回调的作用是处理错误，而非重新抛出错误。react-query会自动捕获mutationFn的错误并更新isError状态，无需手动抛出。修改后的代码如下：

import { useState } from "react";
import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from 'react-query'
import axios from 'axios';

const postTodo = () => axios('https://ya.ru')

const ToDos = () => {
  const { mutate, isError } = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // 处理成功逻辑
    },
    onError: (error) => {
      // 在这里处理错误，比如打印日志、提示用户，不要throw
      console.error('请求失败:', error);
    }
  })

  console.log(isError)

  return (
    <>
      <button onClick={mutate}>Mutate me!</button>
      {isError ? 'Error' : 'No Error'}
    </>
  )
}

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <ToDos />
      </div>
    </QueryClientProvider>
  );
}

2. 自定义错误信息（可选） #

如果需要自定义错误内容，可以在mutationFn中抛出自定义错误，react-query会自动捕获并更新状态：

const postTodo = async () => {
  try {
    await axios('https://ya.ru');
  } catch (err) {
    throw new Error('自定义错误信息');
  }
}

3. 确认react-query版本配置 #

确保你的react-query（v3）版本中，throwOnError未被设置为true。默认情况下throwOnError是false，react-query会捕获错误并更新状态，不会抛出到全局。若之前手动设置过，需改回false：

const { mutate, isError } = useMutation({
  mutationFn: postTodo,
  throwOnError: false, // 显式声明确保默认行为
  // ...其他配置
})

原理说明 #

在react-query v3中，当mutationFn抛出错误时，react-query会：

1. 将isError状态设为true
2. 调用onError回调并传入错误对象
3. 除非设置了throwOnError: true，否则不会将错误抛出到全局

你之前的代码在onError中手动throw错误，相当于绕过了react-query的错误处理，直接让错误冒泡，导致页面中断。

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