Reactjs，Apollo 客户端存储问题

Posted 2023-03-08

【中文标题】Reactjs，Apollo 客户端存储问题

【英文标题】：Reactjs, Apollo Client issue with storage

【发布时间】：2020-07-17 22:07:06

【问题描述】：

我正在开发一个在服务器上使用 graphql 和sailsjs 的reactjs 站点， 我的问题是，前端 react 的当前结构使用大量查询和突变来运行类似向导的过程，用户在其中填写调查。在客户端，apollo 客户端在 chrome 上使用 localstorage 或 sessionStorage（均限制为 5M），因此我们遇到了很多问题，因为 apollo 无法在存储中设置项目，因为它会超过浏览器的配额

我不能使用“无缓存”获取策略，因为应用在很大程度上取决于它存储在缓存中的值

我该怎么办？ - 重构客户端，需要很多时间，这是不可能的。 - 删除不必要的数据.. 但我必须确保它在任何地方都能正常工作，包括在 insta 和 fb 的应用程序浏览器中，它们的空间非常有限。 - redux 与 apollo 客户端一起使用，如果我将数据存储在 redux 而不是浏览器存储中会有帮助吗？

还有其他想法吗？

更新 这是我认为造成问题的代码

const cache = new InMemoryCache(
    fragmentMatcher
  )

const persistor = new CachePersistor(
    key: `local-key`,
    cache,
    storage: usePersistentStorage ? window.localStorage : window.sessionStorage,
    debug: isInDev
  )

我需要在这里更改storage 部分

【问题讨论】：

Apollo 客户端仅使用内存缓存——它根本不会使用本地或会话存储，除非您明确使用 apollo-cache-persist 之类的东西。是这样吗？如果是这样，您的问题并不清楚。

@DanielRearden，我已经更新了问题，请您检查一下，我们使用 CachePersistor。在您发表评论后，我删除了 cachePersistor，它没有在浏览器的本地或会话存储中显示任何内容，这很棒，但我可以知道 InMemoryCache 将数据存储在哪里吗？

@DanielRearden，我的意思是，InMemoryCache 的配额是多少，它是否取决于浏览器存储？

库本身 AFAIK 应用的内存使用没有限制。您将受限于浏览器应用的任何约束，这会有所不同。

@DanielRearden，所以基本上我们仍然依赖于浏览器的限制。我遇到的问题是，以应用程序的当前结构，存储大小在某些情况下已经超过了浏览器的限制，特别是对于 FB 和 instagram 的 inApp 浏览器，

【参考方案1】：

我认为 React 的 context API 会有所帮助，而不是 redux。您可以在其中存储您想要的任何内容，并且可以在整个站点范围内访问它，而不会产生redux 产生的开销。

【参考方案2】：

您可以使用 apollo 提供的 apollo-link-state。它有一个陡峭的学习曲线，但它非常有用