【问题标题】:Apollo GraphQL - Multiple components sharing the same mutationApollo GraphQL - 多个组件共享相同的突变
【发布时间】:2017-08-25 06:07:39
【问题描述】:
我正在使用 react-apollo 并创建一个应用程序,该应用程序需要每 X 秒同步一次应用程序的整个本地数据存储。
所以本质上,假设<input1 /> 和<input2 /> 都需要定期同步到服务器。
<App>
<input1 />
<input2 />
</App>
- GraphQL 应该包装哪个组件以实现同步?
- 是否可以在 redux 操作中使用 graphql 突变,以便在发送操作时发生突变?
【问题讨论】:
标签:
reactjs
redux
graphql
apollo
react-apollo
【解决方案1】:
“Apollo 方式”是让输入类似于 React 绑定输入,但绑定将通过查询和突变发生,并添加乐观响应以提高交互性。
为每个输入创建突变,并在输入更改时调用它们。提供乐观的响应,以便用户操作立即生效。
同样,创建一个查询来获取输入值,并使用这些值来初始化输入。
如果其他人也可以更改输入,您需要设置订阅。
【解决方案2】:
我建议您为整个应用添加订阅。
它可以像这样工作:
- 当您打开页面时查询
<input1 /><input2 /> 的值
- 然后您通过查询的
subscribeToMore 函数订阅服务器。
- 服务器有一个循环,每 x 秒发布一次订阅数据。这将是
<input1 /><input2 /> 的数据
- 那么您有一些可能性,您可以手动更新商店,或者在输入中添加一个 id,然后让 apollo 客户端通过
dataIdFromObject 完成工作。