Аполлон 2.1, Мутация и Реакт-Маршрутизатор

Question

Я довольно новичок в Apollo и начинаю прямо с версии 2.1.

Я также использую реагирующий маршрутизатор, но я не знаю, как сделать browserHistory.push после завершения мутации. Вот части моего кода:

index.js

const client = new ApolloClient({
    uri: "http://localhost:4000/graphql"
});


ReactDOM.render(
    <ApolloProvider client={client}>
        <AppContainer>

            <BrowserRouter basename={basename}>
                <I18nextProvider i18n={i18n}>
                    <Layout />
                </I18nextProvider>
            </BrowserRouter>

        </AppContainer>
    </ApolloProvider>,
    document.getElementById('react_root')
)

};

В onCompleted я хочу показать другую страницу, чтобы сказать пользователю, чтобы проверить электронную почту. Но я не знаю, как это сделать.

RegistrationForm.js

import {browserHistory) from 'react-router';

const onCompleted = (data) => {
    browserHistory.push("/de/register/check-email");
}

const RegistrationForm = () => {


    return (
        <Mutation mutation={REGISTER_USER}
            onCompleted={onCompleted}

        >
            {(register, { data }) => (
                <div>
                    <Form
                        onSubmit={onSubmit}
                        render={({ handleSubmit, pristine, invalid, values, variables }) => (
                            <form onSubmit={(e, ) => {
                                e.preventDefault();
                                register({
                                    variables: {
                                        input: {
                                            username: values.username,
                                            email: values.email,
                                            password: values.password
                                        }
                                    }
                                });
                            }}
                            >
                                <div>
                                    <label>Username</label>
                                    <Field name="username" component="input" placeholder="Username" />
                                </div>
                                <div>
                                    <label>Email</label>
                                    <Field name="email" component="input" placeholder="Email" />
                                </div>
                                <div>
                                    <label>Password</label>
                                    <Field name="password" component="input" placeholder="Password" />
                                </div>
                                <button type="submit"  >Submit</button>

                            </form>
                        )}
                    />
                </div>
            )}
        </Mutation>
    );
};

Кто-нибудь знает, как это сделать? Большое спасибо за вашу помощь.

С наилучшими пожеланиями

Answer 1

Там нет экспорта browserHistory в react-router, но есть history двигательный

Если ваш компонент сразу под <Route>, вы можете использовать это так:

const RegistrationForm = ({history}) => {
  const onCompleted = (data) => {
    history.push("/de/register/check-email");
  }

  return (
  ..

Если ваш компонент находится глубже в дереве, вы можете ввести history и другие реквизиты withRouterНапример:

const RegistrationFormWrapped = withRouter(RegistrationForm);

или же

export default withRouter(RegistrationForm);

И потому что onCompleted сейчас зависит от реквизита и должен быть локальным, имеет смысл конвертировать RegistrationForm в класс.

Answer 2

Я думаю, что нашел решение. Я передал историю как реквизит от вызывающего компонента, а затем пошел с:

const RegistrationFinalForm = ({ history }) => {
    return (
        <Mutation mutation={REGISTER_USER}
            onCompleted={(data) => {
                history.push("/de/register/check-email");
            }}>