如何在 react-apollo 中刷新变量答案

【问题标题】：How to refresh variables in react-apollo如何在 react-apollo 中刷新变量
【发布时间】：2018-09-15 01:36:20
【问题描述】：

这里是场景：

用户 1

1) 进入登录页面
2) 写入通过突变发送到服务器的电子邮件和密码
3) Authentication OK -> 服务器返回一个令牌和用户信息（id、firstName、lastName）
4) 令牌和每个用户信息都存储在本地存储中的单独密钥中
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) 服务器返回信息，用户可以在个人资料页面中看到它们
9) 用户决定退出

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

用户 2

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

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

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

感谢您的帮助。

【问题讨论】：

标签： graphql apollo react-apollo apollo-client

【解决方案1】：

然后第一个用户退出，你需要重置 Apollo 存储并清除本地存储。

【讨论】：

谢谢你的回答没有，我没有提到，但我已经用“this.props.client.resetStore”重置了 Apollo 存储，并从本地存储中删除了这些项目

【解决方案2】：

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

config.options 可以是您现在传递的对象，也可以是查询需要时评估的函数。

因此，要每次从localStorage 加载id 而不是一次，您可以执行以下操作：

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

【讨论】：

你的答案很完美，我不知道！非常感谢 Tal Z 我的查询现在运行完美！