Как установить глобальный реквизит в реакции на клиент

Question

Я работаю с клиентом реагировать и реагировать-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, которое находится внутри моего основного файла маршрута (выше одного)

Как я могу сделать это с клиентом реагировать на Apollo?

Answer 1

К сожалению, в React или Apollo нет такой вещи, как «глобальная» опора.Если вы хотите достичь чего-то похожего на ваш пример (то есть обновить состояние корневого компонента из вашего компонента входа в систему), рассматривали ли вы возможность передачи метода до указанного компонента и его запуска при разрешении мутации GraphQL?

Я собираюсь сделать попытку этого, но, пожалуйста, обратите внимание, что это весь псевдокод, и он лишь обрисовывает в общих чертах один из многих подходов, которые вы можете предпринять для решения этой проблемы:

Приложение.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и вводить пользовательскую информацию в соответствующие компоненты?Как я уже сказал, есть много разных подходов к этому.