React，Apollo 2，GraphQL，身份验证系统

Question

我有此代码：https：//codesandbox.io/s/507w9qxrrl

我不明白：

1）如何重新渲染（）Menu 组件：

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

如果我登录（）我希望我的 Menu组件重新渲染（）本身。但是什么都没有。如果我单击"主链接"，则重新渲染（）。我怀疑是因为我正在用它来渲染它：

<Route component={Menu} />

将其包含在React-Router Prop中。这是错误的吗？

2）如何防止Menu组件查询如果未进行身份验证（例如：LocalStorage中没有令牌）；我在Menu组件中使用此代码：

export default graphql(CURRENT_USER_QUERY)(Menu);

3）这是正确的方法吗？

Answer 1

我将考虑将CURRENT_USER_QUERY移动到您的app.jsx组件中。这将与我下面的内容相似。

我的AppContainer是我的父组件。它检查了用户是否已登录。然后可以取查询结果，并将用户/角色传递给儿童组件（即在您的情况下菜单jsx）。这样，您可以检查用户是否已登录并随后更改哪些组件

const loggedInUser = gql`
  query loggedInUser{
    user {
      id
      role
    }
  }`

export default graphql(loggedInUser, { options: {fetchPolicy: 'network-only' }})(AppContainer)

这是AppContainer.jsx

的更完整示例

import React from 'react';
import { graphql } from 'react-apollo';
import { Route, Switch, Redirect } from 'react-router-dom';
import AppNav from 'AppNav';
import ExampleContainer from 'ExampleContainer';
import ExampleContainerTwo from 'ExampleContainerTwo';
import LoginPage from 'LoginPage';
const AppContainer = ({ data }) => {
  if (data.loading) {
    return <div>Loading...</div>
  }
  //checks if user is logged in
  if (data.user) {
    return (
      <div id="app-container">
        <AppNav adminUser={data.user.role === 'ADMIN' ? true : false} />
        <div className="content">
          <Switch>
            <Route exact path="/app/" component={ExampleContainer} />
            <Route path="/app/example-two" component={ExampleContainerTwo} />
          </Switch>
        </div>
      </div>
    )
  }
  return <LoginPage handleUserLoggedIn={() => data.refetch()} />
}
const loggedInUser = gql`
      query loggedInUser{
        user {
          id
          role
        }
      }`
export default graphql(loggedInUser, { options: {fetchPolicy: 'network-only' }})(AppContainer)