解决Supabase查询结合React Hot Toast Promise误显成功问题

问题根源 #

Supabase 的异步查询方法不会自动抛出异常，无论操作成功还是失败（包括RLS拦截、401权限错误），它都会返回一个包含data和error字段的对象，对应的Promise始终处于resolved状态。而React Hot Toast的toast.promise是通过Promise的状态判断成功/失败的，所以哪怕实际操作出错，它也会走成功分支。

正确实现方式 #

需要手动检查Supabase返回的error字段，当存在错误时主动抛出异常，让toast.promise捕获到失败状态。

1. 改造数据插入函数 #

修改addData函数，在Supabase返回错误时抛出异常：

const addData = async () => {
  // 等待Supabase插入操作完成，解构出error字段
  const { error } = await supabase.from(table).insert(data);
  // 如果存在错误，主动抛出，触发toast的失败分支
  if (error) throw error;
};

2. 调用Toast Promise（可选优化） #

可以根据错误信息动态生成提示内容，提升用户体验：

toast.promise(addData(), {
  loading: '正在插入数据...',
  success: '数据插入成功',
  // 捕获抛出的错误，提取错误信息展示
  error: ({ message }) => `插入失败：${message}`
});

3. 针对特定错误的自定义处理（可选） #

如果需要对特定错误码（比如401权限不足）做个性化提示，可以在抛出错误前判断：

const addData = async () => {
  const { error } = await supabase.from(table).insert(data);
  if (error) {
    if (error.status === 401) {
      throw new Error('权限不足，请重新登录后尝试');
    } else {
      throw new Error(`操作失败：${error.message}`);
    }
  }
};

内容的提问来源于stack exchange，提问作者Trung Kiến