Apollo 2.1, мутация и React-маршрутизатор

Я новичок в 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 я хочу показать другую страницу, чтобы сообщить пользователю проверить электронную почту. Но я не знаю, как это сделать.

Форма регистрации.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>
    );
};

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

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


reactjs react-router-v4 react-apollo mutation
person schingeldi    schedule 16.04.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В react-router нет экспорта browserHistory, но есть реквизит history.

Если ваш компонент находится непосредственно под <Route>, вы можете использовать его следующим образом:

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

  return (
  ..

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

const RegistrationFormWrapped = withRouter(RegistrationForm);

or

export default withRouter(RegistrationForm);

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

person Oblosys    schedule 16.04.2018

arrow_upward
0
arrow_downward

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

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