Apollo 2.1, Mutation and React-Router - reactjs

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.

Answer 2

I think I found the solution. I passed history as a prop from the calling component and then went with:
const RegistrationFinalForm = ({ history }) => {
return (
<Mutation mutation={REGISTER_USER}
onCompleted={(data) => {
history.push("/de/register/check-email");
}}>