Apollo 2.1, Mutation and React-Router

Question

I am pretty new to Apollo and starting right with version 2.1.

I also use react-router but I don't know how to do a browserHistory.push after a mutation was completed. Here are parts of my code:

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')
)

};

In onCompleted I want to show a different page to tell user to check the emails. But I don't know how to do so.

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>
    );
};

Does anybody knows how to do so? Thanks a lot for your help.

Best regards

Answer 1

There's no export browserHistory in react-router, but there is a history prop.

If your component is immediately under a <Route>, you can use it like this:

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

  return (
  ..

If your component is deeper in the tree, you can inject the history and other route props with withRouter, e.g.:

const RegistrationFormWrapped = withRouter(RegistrationForm);

or

export default withRouter(RegistrationForm);

And because onCompleted depends on a prop now and needs to be local, it makes sense to convert RegistrationForm to a class.