如何在react-query中处理错误且不触发unhandledrejection事件

问题出在你给mutationFn传值的方式上——你直接写了foo()，这会在组件渲染时立即执行foo函数，而不是把foo作为mutation触发时要执行的函数传给useMutation。这种情况下，foo抛出的异常没有被useMutation的内部异常处理机制包裹，自然会冒泡到全局，触发unhandledrejection事件。

解决方法很简单，把mutationFn改成传递函数引用，而不是执行结果：

const mutation = useMutation({
   // 去掉括号，传递foo函数本身
   mutationFn: foo,
   onError: () => {
      console.log("error caught by onError");
   }
})

如果你的foo需要传递参数，可以用箭头函数包裹：

const mutation = useMutation({
   mutationFn: () => foo(yourParams),
   onError: () => {
      console.log("error caught by onError");
   }
})

这样修改后，useMutation会在触发mutation时才执行foo，并且内部会自动捕获foo抛出的所有同步异常和Promise拒绝，通过onError回调处理，不会让未处理的拒绝冒泡到全局，也就不会触发window的unhandledrejection事件了。

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