时间戳

首页 > 解决方案 > Apollo 客户端持久缓存不起作用

reactjs - 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
    }
  }
`

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

标签： reactjsgraphqlapolloreact-apolloapollo-client

解决方案

显然更改了InMemoryCache缓存writeQuery并writeFragment 在重新加载页面后消失。

Apollo 客户端文档：

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

推荐阅读