如何在反应阿波罗客户端中设置全局道具答案

【问题标题】：How to set global prop in react apollo client如何在反应阿波罗客户端中设置全局道具
【发布时间】：2019-07-06 04:11:33
【问题描述】：

我正在使用 react 和 react-apollo 客户端。

这是我的主要路线文件

const PrivateRoute = ({ component, isAuthed, ...rest }) => {
  console.log({ isAuthed })
  return (
    <Route {...rest} exact
      render = {(props) => (
        isAuthed ? (
          <div>
            {React.createElement(component, props)}
          </div>
        ) :
          (
            <Redirect
              to={{
                pathname: '/login',
                state: { from: props.location }
              }}
            />
          )
      )}
    />
  )
}

class App extends Component {
  state = {
    isAuthed: false
  }

  async componentWillMount() {
    this.setState({ isAuthed: true })
  }

  render() {
    const { isAuthed } = this.state
    return (
        <div style={{ direction: direction }}>
          <Header {...this.props} history={history}/>
          <Router history={history}>
            <Switch>
              <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
              <Route path="/login" component={Login}/>
              <PrivateRoute isAuthed={isAuthed} path="/dashboard" component={Dashboard} />
              <PrivateRoute isAuthed={isAuthed} path="/AdminManagement" component={Admin} />
            </Switch>
          </Router>
        </div>
    )
  }
}

export default compose(
  graphql(SET_SESSION, { name: 'setSession' })
)((withNamespaces)('common')(App))

现在，当我在登录组件中登录时，我需要将 isAuthed 设置为 true，这在我的主路由文件中（上一个）

如何使用 react apollo 客户端做到这一点？

【问题讨论】：

这个问题缺少很多细节......现在没有人可以帮助你。什么查询？ Login 是什么？为什么是阿波罗客户端？你的后端怎么样？
@Treycos 不要太深入。只是想知道如何在多个组件中更新/获取相同的prop，就像我们对 react redux 所做的那样

标签： reactjs ecmascript-6 graphql react-apollo apollo-client

【解决方案1】：

不幸的是，在 React 或 Apollo 中没有“全局”道具这样的东西。如果您想实现与您的示例类似的东西（即从您的登录组件更新根组件的状态），您是否考虑过将方法传递给所述组件并在您的 GraphQL 突变解决时触发它？

我将对此进行尝试，但请注意，这都是伪代码，只是概述了您可以采取的解决此问题的众多方法之一：

App.js

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: {},
            authed: false,
        }
        this.modifyUserInfo = this.modifyUserInfo.bind(this);
    }

    modifyUserInfo(userInfo) {
        this.setState(state => ({
            ...state,
            userInfo,
            authed: true,
        }))
    }

    render() {
        return (
            // Render all your routes and everything...
            <LoginComponent loginCb={modifyUserInfo} />
        )
    }
}

登录组件

const Login = props => {
    return (
            <Mutation mutation={loginMutation}>
                {(login) => {
                    <form onSubmit={(e) => {
                        e.preventDefault();
                        login()
                            .then(res => {
                                if (res.userInfo) {
                                    props.loginCb(res.userInfo);
                                }
                            })
                            .catch(err => {
                                console.log(err)
                            })
                    }}>
                        {/* Add the rest of your login form */}
                        <button type="submit"/>
                    </form>
                }}
            </Mutation>
    )
}

您是否考虑过使用 Apollo Cache 并将用户信息注入相关组件中，而不是将您的用户身份验证信息存储在您的根状态中？就像我说的，有很多很多不同的方法可以解决这个问题。

【讨论】：