如何重置 Apollo Client 的 useMutation 钩子

Question

我正在开发一个阵营目前正使用的绑在GraphQL突变形式useMutation的阿波罗客户端。在服务器上，我执行一些验证，如果出现错误，我拒绝突变。在客户端，我使用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回调。