0

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

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

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

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

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

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

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

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

4

1 回答 1

0

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

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

从文档——更新商店：

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

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

这与optimisticUpdate相结合将为您提供所需的体验。可以在此处找到optimisticUI 的示例

于 2017-12-29T04:23:10.873 回答