Question

我正在使用 useMutation 的 Apollo Client 开发一个与 GraphQL 突变相关联的 React 表单。在服务器上，我执行一些验证，如果出现错误，我拒绝突变。在客户端，我使用 error 对象接收验证错误。我的钩子看起来像这样：

const [addDrone, { error }] = useMutation(ADD_DRONE)

所以我解压 error 对象并在对话框中将其呈现给用户，让他/她知道出了什么问题。在用户关闭对话框后，我想让用户有机会修复错误，以便他/她可以重新提交表单。这就是事情变得毛茸茸的地方。我想在用户关闭对话框时清除 error 对象，但由于此变量来自 useMutation 挂钩，因此我无法对其进行变异或重置。看起来 useMutation 旨在触发一次，不再使用。

所以我的问题是，有没有办法将 useMutation 挂钩“重置”回其原始状态？

Answer 1

截至 2020 年 12 月 26 日，无法重置 useMutation，但是 Apollo 功能请求存储库中有两个功能请求 #157 #170 要求一个，所以这个将来可能会改变。

现在实现此行为的最简单方法是删除 error 变量并改用 onError 处理程序。这是 useMutation 提供的回调，它使用相同的 error 对象。然后，您可以将其连接到您自己的有状态变量，这为您提供完全相同的 error 变量和使用 setError 清除它的能力。请参阅下面的示例：

  const [error, setError] = React.useState(null)
  const [addDrone] = useMutation(ADD_DRONE, {
    onError: setError,
  })

如果您还想重置 data 对象，您可以引入另一个有状态元组 [data, setData] 并将 setData 连接到 onCompleted 回调。

如何重置 Apollo Client 的 useMutation 钩子

1 个答案: