React 中继磁盘缓存答案

【问题标题】：React relay disk cacheReact 中继磁盘缓存
【发布时间】：2017-04-14 14:40:39
【问题描述】：

我已经使用 GraphQL API 反应原生应用程序，其中使用 react-relay 库。而且我需要对应用程序实现磁盘缓存，我看到请求已经在运行时缓存，但是在重新加载应用程序后，请求再次从服务器重新加载数据但需要从缓存中获取。

【问题讨论】：

+1 在这里。我在任何地方都找不到与将反应中继缓存持久化到磁盘相关的任何内容（反应中继文档和谷歌都没有）。有人吗？

标签： reactjs caching mobile react-native react-relay

【解决方案1】：

好的，这是我自己想出的一个粗略的解决方案：

import {
  Environment,
  Network,
  QueryResponseCache,
  RecordSource,
  Store,
} from 'relay-runtime';

const oneMinute = 60 * 1000;
const cacheTtl = oneMinute * 1440; // 24 hours
const cache = new QueryResponseCache({ size: 500, ttl: cacheTtl });

// Restore cache from localStorage
const localStorageCacheResponses = localStorage.getItem('relay-cache');
if (localStorageCacheResponses) { 
  cache._responses = new Map(Object.entries(JSON.parse(localStorageCacheResponses)));
  console.log('cache restored');
}

那么，在更新缓存时：

// Update cache on queries
    if (isQuery && json) {
      cache.set(queryID, variables, json);
    }
    // Clear cache on mutations
    if (isMutation) {
      console.log('cache cleared');
      cache.clear();
    }
    
    // Update localStorage cache copy (for persistent cache storage between sessions)
    localStorage.setItem('relay-cache', JSON.stringify(Object.fromEntries(cache._responses)));

随意使用您喜欢的任何持久性存储解决方案。我正在使用 localStorage，因为 webapp.当然，这是完全不安全的，因此对于敏感信息来说是一个很大的禁忌。此外，您可能需要考虑在某些时候（登录、注销等）清除缓存，这样如果您有不同的用户，数据就不会混淆。

【讨论】：