Apollo Client/GraphQL 实时更新 UI [重复]

Posted 2023-03-08

【中文标题】Apollo Client/GraphQL 实时更新 UI [重复]

【英文标题】：Apollo Client/GraphQL updating the UI in real time [duplicate]

【发布时间】：2017-08-28 21:47:27

【问题描述】：

我有一个表单，我试图在其中创建用户体验，当您创建新记录时，它将为其创建一个 id 并实时写入数据库，并在 UI 中反映这些更改. 要么 您正在编辑一条记录，它已经被赋予了一个 id，因此它知道要更新记录。

我有一个突变可以处理 2 种情况：

没有传递给突变的 ID，因此它创建了一个新的。

它传递了一个 ID ，因此它会更新该对象。

该组件正在使用 compose 来包装 2 case 突变，以及对该对象的查询。 我尝试附加一个 fetchPolicy: 'cache-and-network'，但这不起作用。

预期结果： 试图取回组件操作中生成的 id

实际结果： 重新渲染组件时ID显示为null，仅在页面刷新时更新

如何重现该问题： 我有一个突变，如果它没有传递以前的 id，它会为一个对象创建一个新的 id。 或者，如果它传递了一个 id，那么它将更新该对象。

【问题讨论】：

如果您可以显示组件的代码（甚至可能是带有突变的 HOC），这将有助于诊断。

【参考方案1】：

TLDR；您需要手动将新创建的对象添加到您的 apollo 存储中以更新用户界面。

我没有看到任何代码的回答：当您运行突变时，Apollo Client 将自动更新存储中与突变返回的对象的 id 与返回的字段匹配的任何内容。如果您正在创建一个新对象，Apollo 将不会在您的商店中找到匹配的对象进行更新，因此它不会自动发生。

来自文档 -- Updating the Store:

在某些情况下，仅使用 dataIdFromObject 是不够的 应用程序 UI 以正确更新。例如，如果您想在不重新获取整个列表的情况下将某些内容添加到对象列表中，或者如果您无法为某些对象分配对象标识符，则 Apollo 客户端无法为您更新现有查询。

您需要手动将新创建的对象添加到您的商店。幸运的是，有 api 可用于这件事。您正在寻找的作品是update 选项。

这与optimisticUpdate 一起将为您提供所需的体验。一个optimisticUI的例子可以找到here