Apollo 客户端持久缓存不起作用

Posted 2023-03-08

【中文标题】Apollo 客户端持久缓存不起作用

【英文标题】：Apollo client persist cache not working

【发布时间】：2019-01-08 20:31:13

【问题描述】：

我有一个带有 apollo 客户端的反应应用程序。当用户登录时，我可以查询客户端状态并检索用户，但是刷新页面时，不再设置用户数据。

如您所见，我有我的 index.js 文件，我在其中设置客户端，然后将其传递给我的 ApolloProvider，它包装了我的整个应用程序。

// index.js

const client = () => 
  const cache = new InMemoryCache()

  persistCache(
    cache,
    storage: window.localStorage
  )

  return new ApolloClient(
    uri: graphQLUri,
    credentials: 'include',
    clientState: 
      defaults: 
        locale: "en-GB",
        user: 
          __typename: "User",
          isLoggedIn: false,
          username: "",
          salesChannel: "",
          fullName: ""
        
      ,
      typeDefs: `
        enum Locale 
          en-GB
          fr-FR
          nl-NL
        
        type Query 
          locale: Locale
        
      `
    ,
    cache
  )


ReactDOM.render(
  <ApolloProvider client=client()>
      <App />
  </ApolloProvider>,
  document.getElementById("root")
)

我应该补充一点，当我在刷新页面后登录window.localStorage 时，我可以看到我登录的user 对象。当我在刷新页面后查询用户时，我只得到在 clientState 默认值中设置的默认值。

另外，我知道GET_USER 查询有效，因为在登录并将用户对象写入缓存后，GET_USER 查询运行并返回用户对象。

作为参考，我的GET_USER查询是这样的：

gql`
  
    user @client 
      username
      salesChannel
      fullName
      isLoggedIn
    
  
`

为什么用户对象在重新加载页面后没有持久化在缓存中？

【参考方案1】：

显然，使用writeQuery 和writeFragment 对InMemoryCache 缓存所做的更改在重新加载页面后消失。

Apollo Client docs:

如果您重新加载您的环境，那么使用 writeQuery 和 writeFragment 所做的更改将会消失。

【讨论】：

请进一步解释

你想知道什么？

如果用户刷新页面，你能得到 gql 调用以从缓存中获取吗？您解释说他们删除了该功能，但他的问题可能吗？

是的，请查看 apollo-cache-persist (blog.apollographql.com/…)。该线程只关心使用writeQuery和writeFragment手动写入缓存后的持久化缓存，似乎从未支持过这种持久化。

我最终使用了 VueX 和 Vuex-persist。这种方式状态管理更干净，更有条理，而且它还保持离线和刷新:) 你的回答真的很有帮助，感谢 nomadoda。有几点