使用Flux模式的中继缓存?

时间:2015-12-22 05:51:09

标签: reactjs relayjs graphql

我真的很想在我的Flux商店中加入Relay缓存,这样我就能做到"时间旅行"并深入了解应用程序。

看起来Relay存储和操作都是不可序列化的类,这是无聊的。但看起来我应该能够将缓存与网络请求分开,并将缓存保存在Flux存储中。

这听起来有趣还是我在错误的树上吠叫?

1 个答案:

答案 0 :(得分:4)

Relay当然可以与Flux一起使用,我们已经与许多成功使用它们的开发人员交谈过。一般模式是让Relay拥有服务器数据的缓存并管理与服务器的通信,并使用Flux进行存储和访问。更新仅客户端数据。

从Flux读取中继数据

如果Flux商店需要访问服务器数据,他们可以使用draw() API从服务器获取数据并从缓存中读取数据:

Relay.Store

检查中继缓存

Relay不直接支持时间旅行调试。但是,我们正积极致力于Relay的开发人员工具,并且很快就会提供初始版本。在此期间,有一些选项可用于检查缓存的状态:

  • 拦截并记录所有针对中继存储的低级更新。这可以通过使用// build a query var query = Relay.createQuery(Relay.QL`query { ... }`, {var: 'value'}); // fetch any missing data for this query Relay.Store.primeCache({query}, readyState => { if (readyState.done) { // read data once the cache is populated var data = Relay.Store.readQuery(query)[0]; } }); 注入缓存管理器来完成(请注意,API名称可能会更改,但缓存管理器API本身是稳定的)。 CacheManager接口为defined here - 请注意,这将允许您记录写入Relay缓存的所有值,以构建您想要数据的任何可视化。写入缓存管理器的所有字段值都是JSON可序列化的。请注意,缓存管理器无法将数据写回存储中,因此这将主要允许您查看缓存的当前状态。
  • 通过注入custom network layer来拦截网络层的所有查询和变异请求。这将指示您的应用程序请求的数据以及从服务器接收的数据。