升级react-scripts至v5后，react-query mutation触发未捕获Promise错误

问题原因 #

react-scripts v5升级后，对未捕获Promise的检测机制更严格；而react-query v3中，mutateAsync会返回mutation函数抛出的rejected Promise，若该Promise未被显式捕获，就会触发「Uncaught (in promise)」错误——即使你在mutation的onError中处理了错误，也不影响mutateAsync返回的Promise状态。

具体解决办法 #

1. 显式捕获mutateAsync的Promise错误 #

直接将mutateAsync绑定到onClick时，触发的Promise没有被捕获。需要包装调用逻辑，用try/catch兜底：

// Component.js
import useDeleteMutation from './useDeleteMutation';

export default function Component(){
  const { mutateAsync: deleteItem } = useDeleteMutation();

  const handleDelete = async () => {
    try {
      await deleteItem();
    } catch (err) {
      // 可在此处添加错误提示逻辑，即使为空也能避免未捕获错误
    }
  };

  return (
    <button onClick={handleDelete}>Delete</button>
  );
}

注意：避免使用delete作为变量名（它是JavaScript关键字），建议改为deleteItem这类命名。

2. 改用mutate并通过onError处理错误 #

react-query的mutate方法不会返回Promise，内部会处理mutation的错误流，配合onError回调即可避免未捕获错误：

// useDeleteMutation.js
import { useMutation } from 'react-query';

export default function useDeleteMutation() {
  return useMutation(
    async () => {
      return Promise.reject('Simulate failure');
    },
    {
      onError: (err) => {
        console.error('删除失败:', err);
        // 此处可添加用户提示、状态更新等逻辑
      }
    }
  )
};

组件中调用方式：

// Component.js
import useDeleteMutation from './useDeleteMutation';

export default function Component(){
  const { mutate: deleteItem } = useDeleteMutation();

  return (
    <button onClick={() => deleteItem()}>Delete</button>
  );
}

3. 升级react-query到v4版本 #

react-query v4对mutateAsync的错误处理逻辑做了优化，即使未显式捕获返回的Promise，也不会触发未捕获错误。如果项目允许，升级到v4是更彻底的解决方案。

内容的提问来源于stack exchange，提问作者Alan P.