如何在不推送到服务器的情况下更新中继存储

Posted 2023-03-08

【中文标题】如何在不推送到服务器的情况下更新中继存储

【英文标题】：How to update Relay store without pushing to server

【发布时间】：2017-03-28 15:14:05

【问题描述】：

我的 React/Relay 应用程序中有一个表单，用于修改某些字段。我不想每次在输入中输入新字母时都发送服务器更新。如何使用 Relay 来支持应用程序状态而不总是推送到服务器？在阅读了大部分 Relay 文档之后，在我看来，我基本上必须将 Relay 状态复制到我的表单的本地状态或其他一些 Flux 存储，处理在那里进行更改，然后将其提交到 Relay。尽管只是为了保持本地状态，但这似乎需要做很多额外的工作。

【问题讨论】：

您可以在组件中设置状态，也可以使用 redux 等本地存储。据我所知，您无法按照您描述的方式在本地更新中继存储。最近经历了类似的情况，我很高兴得到纠正。我个人认为，当涉及到表单时，不仅保持本地状态很有用，而且在用户刷新页面或稍后返回完成时使用本地存储来保持状态，但这可能不适合你的用例在这里。

【参考方案1】：

在现代中继中，您可以使用commitLocalUpdate 来做到这一点。

例如

onEmailChange = (email) => 
  commitLocalUpdate(environment, (proxy) => 
    const userProxy = proxy.get(this.props.user.__id);
    userProxy.setValue(email, 'email');
  );

【讨论】：

太棒了！我在 repo 中看到了这个函数，但是有没有关于它的文档？

@MatthewHerbst 不，我在他们的官方文档中找不到它，虽然这会起作用，但您应该使用正常的组件状态，除非您希望这些更改在输入更改时反映在另一个组件中......

【参考方案2】：

Relay 当前版本是 graphQL 和 React 之间的粘合剂，它只处理来自服务器的数据。

---

...在我看来，我也必须基本上复制中继状态 到我表单的本地状态...

我看不到问题所在。 React 的工作方式要求您为整个表单或每个输入单独存储 state。

如果您添加编辑功能（呈现表单并获取数据以填充输入以供用户更改它们），则所有中继数据都可以在表单级别以this.props.RelayFragmentName 的形式使用。

您将其传递给输入，然后将其分配给state，然后圈子就完成了。您还可以直接从props 提供输入（无需将数据分配给输入state）并通过输入via 方法更改state 的形式。

现在当用户进行更改并确认时，您只需再次收集所有state 以进行更改。

我认为它是一个完整的圆圈，如果设置了所有默认值，基本上是牢不可破的。

---

Relay 具有命令式 API 可以直接获取、添加或更新缓存，但它比较脏且很少使用（尤其是对于本地状态）。它用于 WebSockets 等功能，您希望将更新从服务器推送到客户端并手动更新缓存。

当前中继仅用于处理服务器数据。中继 2 有一个本地缓存，但还没有出来。

---

如果我们谈论的是不同的事情，或者您可以使用一些代码示例，请告诉我。

【讨论】：

您好，谢谢您的回答。我认为我们在谈论同一件事，尽管我很想看到RelayFragmentName 的用法，但以前从未见过。我想我只是觉得我想直接在 Relay 中使用 API 并更改状态，这会将所有内容作为道具传递并让我的组件是无状态的。我只是不一定希望每次中继状态更改都会导致网络请求。