在获取新数据时在 react-native 应用程序上使用中继缓存数据

Posted 2023-03-08

【中文标题】在获取新数据时在 react-native 应用程序上使用中继缓存数据

【英文标题】：Use relay cache data on react-native app while fresh data is being fetched

【发布时间】：2017-07-25 01:16:34

【问题描述】：

我有一个与 Relay 集成的 React Native 应用，我想为用户提供离线优先的体验。

因此，在第一次启动应用时，应在加载数据时显示占位符。之后，每次启动应用程序时，我都希望在加载新数据时显示最后缓存的数据。

我找到了this issue from 2015 并基于eyston's answer 我尝试使用AsyncStorage 实现基于relay-cache-manager 的CacheManager。使用 CacheManager 我可以从缓存中保存和加载中继记录，但是当网络被禁用时，应用程序无法显示缓存数据。

在中继获取新数据时，有什么方法可以使用中继缓存的数据吗？

【参考方案1】：

我们有一个生产应用程序，它使用 Relay 和 RealmDB 进行离线体验。我们采用了与 CacheManager 不同的方法，因为当时 CacheManager 还没有完全准备好。我们为此使用了relay-local-schema。

我们使用 relay-local-schema 定义了移动设备所需的整个架构。这可能与您的后端服务器用于定义 graphql 架构并更改解析函数以解析来自领域 db 的数据的文件相同。为此，我们还在 realmdb 中创建了架构，其结构与 graphql 架构几乎相同，以便将后端服务器返回的数据写入 realmdb。您还可以使用 graphql 自省查询自动生成此模式。我们定义了一个custom network layer，我们确保所有中继查询始终触及本地数据库。在sendQueries 函数中，所有查询都使用relay-local-schema 解决，它得到非常快速的解决，反应视图显示旧数据，同时为sendQueries 函数中的每个请求发出网络请求。在接收来自网络请求的数据时，它被写入 realmdb 并且内存中的 Relay 存储也填充了新数据，这会自动刷新所有数据更改的反应视图。要将数据写入 Relay 内存存储，我们使用了以下未记录的方法

Relay.Store.getStoreData().handleQueryPayload(query, response);

您可以使用 request.getQuery() 从 sendQueries 函数中收到的请求中获取查询对象。

我们当前的实现与我们的业务逻辑有点捆绑，因此很难开源这个逻辑。我会尽量提供一个演示应用程序是可能的。

【讨论】：

感谢您的快速回复@meteors。我考虑过使用relay-local-schema，但我放弃了，因为我不喜欢在我的应用程序上导入GraphQLSchema 的想法（架构是在一个单独的项目中定义的，我不想捆绑它）。在您回复后，我找到了json-to-graphql-schema 存储库。我会尝试使用 babel-relay-plugin 使用的 json 模式。

很高兴看到你的实现。我知道很难将您的业务逻辑与代码分开并创建一个带有演示的存储库，因此如果您可以使用自定义网络层和 RealmDB 更新的示例代码创建一个要点，我将不胜感激。代码不需要工作 =D。无论如何，我会尝试使用本地模式的方法。当我有进展时，我会在这里更新。

好的，我会尽快添加要点或演示应用程序。

刚刚更新：CacheManager 对我来说已经足够了。它能够在 NetworkLayer 获取新数据时提供缓存数据。应用显示数据的唯一延迟是从AsyncStorage 读取数据，速度很快。