Apollo Client / GraphQL实时更新UI

问题描述 投票:0回答:1

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

我有一个突变处理这2个案例:

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

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

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

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

实际结果:ID在重新呈现组件时显示为null,仅在页面刷新时显示更新

如何重现这个问题:我有一个突变,如果它没有传递一个先前的id,就为对象创建一个新的id。或者,如果它传递了一个id,那么它将更新该对象。

reactjs graphql apollo react-apollo apollo-client
1个回答
0
投票

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

我没有看到任何代码的答案:当你运行变异时,Apollo Client会自动更新商店中与变量返回的对象的id匹配的任何内容以及返回的字段。如果您正在创建新对象,Apollo将无法在您的商店中找到要更新的匹配对象,因此不会自动进行更新。

来自文档 - Updating the Store

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.