如何重置 Apollo 客户端的 useMutation 钩子

Posted 2023-02-21

【中文标题】如何重置 Apollo 客户端的 useMutation 钩子

【英文标题】：How do I reset the useMutation hook of Apollo Client

【发布时间】：2021-04-04 00:55:24

【问题描述】：

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

const [addDrone,  error ] = useMutation(ADD_DRONE)

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

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

【参考方案1】：

更新 12/22/2021：从 @apollo/client 的版本 3.5.0 开始，useMutation 挂钩现在提供 reset 方法。您可以使用此方法将挂钩重置为其初始状态。例如：

const [addDrone,  error, reset ] = useMutation(ADD_DRONE)

以下是the official documentation on this method的一些笔记。

调用 reset 将突变的结果重置为其初始状态（即， 在调用 mutate 函数之前）。您可以使用它来启用 用户可以忽略 UI 中的突变结果数据或错误。

调用 reset 不会删除任何由 突变的执行。它只影响与 useMutation hook，导致相应组件重新渲染。

---

旧答案，留给那些使用旧版本 @apollo/client 的人：

截至 2020 年 12 月 26 日，无法重置 useMutation，但是 Apollo 功能请求 repo 中有两个功能请求 #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 3.5.xgithub.com/apollographql/apollo-client/issues/…中实现

感谢@RobertMcReed 的更新。我已经更新了答案:-)