Apollo GraphQL - 多个组件共享相同的突变

Posted 2023-03-08

【中文标题】Apollo GraphQL - 多个组件共享相同的突变

【英文标题】：Apollo GraphQL - Multiple components sharing the same mutation

【发布时间】：2017-08-25 06:07:39

【问题描述】：

我正在使用 react-apollo 并创建一个应用程序，该应用程序需要每 X 秒同步一次应用程序的整个本地数据存储。

所以本质上，假设<input1 /> 和<input2 /> 都需要定期同步到服务器。

<App>
   <input1 />
   <input2 />
</App>

GraphQL 应该包装哪个组件以实现同步？ 是否可以在 redux 操作中使用 graphql 突变，以便在发送操作时发生突变？

【参考方案1】：

“Apollo 方式”是让输入类似于 React 绑定输入，但绑定将通过查询和突变发生，并添加乐观响应以提高交互性。

为每个输入创建突变，并在输入更改时调用它们。提供乐观的响应，以便用户操作立即生效。

同样，创建一个查询来获取输入值，并使用这些值来初始化输入。

如果其他人也可以更改输入，您需要设置订阅。

【参考方案2】：

我建议您为整个应用添加订阅。 它可以像这样工作：

当您打开页面时查询<input1 /><input2 /> 的值 然后您通过查询的subscribeToMore 函数订阅服务器。 服务器有一个循环，每 x 秒发布一次订阅数据。这将是<input1 /><input2 /> 的数据 那么您有一些可能性，您可以手动更新商店，或者在输入中添加一个 id，然后让 apollo 客户端通过 dataIdFromObject 完成工作。