reactjs - 如何重置 Apollo Client 的 useMutation 钩子(Hook)

Question

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

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

所以我打开了 error对象并在对话框中将其呈现给用户，让他/她知道出了什么问题。在用户关闭对话框后，我想让用户有机会修复错误，以便他/她可以重新提交表单。这就是事情变得毛茸茸的地方。我要清除 error当用户关闭对话框时的对象，但由于此变量来自 useMutation钩子(Hook)我无法改变或重置它。它看起来像 useMutation设计为发射一次，不再使用。
所以我的问题是，有没有办法“重置” useMutation钩回它的原始状态？

Answer 1

截至 2020 年 12 月 26 日，无法重置 useMutation ，但是有两个功能请求 #157 #170在 Apollo Feature Request repo 上要求一个，所以这在 future 可能会改变。
现在实现此行为的最简单方法是删除 error变量并使用 onError 处理程序代替。这是 useMutation 提供的回调使用相同的 error目的。然后，您可以将其连接到您自己的有状态变量，这将为您提供完全相同的 error变量和使用能力 setError清除它。请参阅下面的示例:

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

如果您想重置 data对象也可以引入另一个有状态元组 [data, setData]并接线 setData到 onCompleted打回来。