Apollo Client / GraphQL实时更新UI

时间:2017-04-03 21:27:45

标签: reactjs graphql apollo react-apollo apollo-client

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

我有一个突变处理这个案例有两种情况:

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

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

组件正在使用compose来包装2个案例的变异,以及对该对象的查询。 我试过附加一个fetchPolicy:'缓存和网络'但是这不起作用。

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

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

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

1 个答案:

答案 0 :(得分:0)

TLDR; 您需要手动将新创建的对象添加到您的apollo商店,以便更新ui。

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

来自文档 - Updating the Store

  

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

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

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