React,Apollo 2,GraphQL,身份验证.如何在登录后重新渲染组件

Question

我有这个代码:https://codesandbox.io/s/507w9qxrrl

我不明白:

1)如何在以下后重新渲染()Menu组件:

this.props.client.query({
  query: CURRENT_USER_QUERY,
  fetchPolicy: "network-only"
});

如果我登录()我希望我的Menu组件重新渲染()本身.但没什么.只有当我点击Home链接时,它才会重新渲染().我怀疑是因为我用它来渲染它:

<Route component={Menu} />

在反应路由器道具中拥抱它.这是错的吗？

另外,如果this.props在login()我看到loading: true永远之后检查菜单.为什么？

2)如果未经过身份验证,如何防止Menu组件查询(例如:localStorage中没有令牌); 我在Menu组件中使用此代码:

export default graphql(CURRENT_USER_QUERY)(Menu);

3)这是正确的方法吗？

Answer 1

首先，让我回答您的第二个问题：您可以使用跳过查询选项来跳过操作。

export default graphql(CURRENT_USER_QUERY, {
  skip: () => !localStorage.get("auth_token"),
})(Menu);

现在的问题是当本地存储发生变化时如何重新渲染这个组件。通常，React 不会监听本地存储来触发重新渲染，而是使用以下三种方法之一完成重新渲染：

1. 组件的状态改变
2. 组件的父组件重新渲染（通常为子组件使用新的 props）
3. 在组件上调用forceUpdate

（请注意，订阅上下文的更改也会触发重新渲染，但我们不想弄乱上下文;-)）

您可能想要使用 2. 和 3. 或 1. 和 2. 的组合。在您的情况下，更改路由就足够了（就像您在登录功能中所做的那样）。如果这不起作用，您可以this.forceUpdate()在登录后使用回调属性调用 App 组件<Login onLogin={() => this.forceUpdate() } />。