如何在 react-apollo 中刷新变量

Question

场景如下：

用户 1

1) 进入登录页面
2) 写入通过变异发送到服务器的电子邮件和密码
3) 身份验证成功 -> 服务器 returns 令牌和用户信息（id、名字、姓氏）
4)token和每个用户的信息都存储在本地存储的一个单独的key中
5) 用户被重定向到主页
6) 用户进入个人资料页面
7) 向服务器发送查询以检索有关该用户的所有信息（感谢存储在本地存储中的用户 ID）

这里是查询：

const PROFILE_QUERY = gql`
  query profileQuery($id: ID!) {
    getUser(id: $id) {
      firstName
      lastName
      email
    }
  }
`;

export default graphql(PROFILE_QUERY, {
  options: {
    variables: {
      id: localStorage.getItem("id")
    },
    errorPolicy: "all"
  }
})(ProfilePage);

8) 服务器 returns 信息，用户可以在配置文件页面看到它们
9) 用户决定退出

所以第一个用户一切正常，现在第二个用户到达同一台计算机和同一浏览器。

用户 2

从 1 到 7 与前一个用户相同的步骤
发送到服务器以检索用户信息的查询不起作用，因为查询发送的 id 是前一个用户的 id（不允许一个用户检索其他用户的信息）

如果我刷新浏览器，查询将与正确的用户 ID 一起发送...

那么为什么在第一次尝试时没有刷新 id 变量（似乎没有读取本地存储中的 id 值）？我该如何解决这个问题？

感谢您的帮助。

Answer 1

然后第一个用户登出，需要重置Apollo store和清除本地存储。

Answer 2

发生这种情况是因为您的 options 字段是静态的，并且在首次加载包含查询的文件时对其进行评估。（我假设在某个地方，也许是第 3 步或第 4 步，本地存储中的 id 已为第二个用户正确更新。）

config.options 可以是一个对象，例如您现在传递的对象，也可以是查询需要时计算的函数。

因此，要每次从 localStorage 加载 id 而不是一次，您可以这样做：

options: () => ({
  variables: {
    id: localStorage.getItem("id")
  },
  errorPolicy: "all"
})

如何在 react-apollo 中刷新变量

How to refresh variables in react-apollo

apollo

graphql

react-apollo

apollo-client