React、Apollo 2、GraphQL、身份验证系统答案

【问题标题】：React, Apollo 2, GraphQL, Authentication systemReact、Apollo 2、GraphQL、身份验证系统
【发布时间】：2018-05-23 15:46:06
【问题描述】：

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

我不明白：

1) 如何重新渲染() Menu 组件后：

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

如果我 login() 我希望我的 Menu 组件重新渲染() 本身。但什么都没有。如果我点击主页链接，它会重新渲染（）。我怀疑是因为我正在使用它来渲染它：

<Route component={Menu} />

将它包含在 react-router 道具中。错了吗？

2) 如何防止Menu组件在未认证的情况下查询（例如：localStorage中没有token）；我在Menu 组件中使用此代码：

export default graphql(CURRENT_USER_QUERY)(Menu);

3) 这是正确的方法吗？

【问题讨论】：

为什么要重新渲染组件？它不会，因为它没有使用内部使用 client.watchQuery 的 graphql HoC。 Yuu 正在使用 client.query 一次来获取一些数据。改变那条数据的更改不会触发重新渲染。

标签： reactjs react-native graphql apollo react-apollo

【解决方案1】：

我会考虑将 CURRENT_USER_QUERY 移动到您的 App.jsx 组件中。这将类似于我在下面的内容。

MyAppContainer 是我的父组件。它检查用户是否已登录。然后它可以获取查询结果并将用户/角色传递给子组件（即您的情况下的 Menu.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)

【讨论】：