Re-fetching parent 'currentUser' data after child component logs in using Apollo - reactjs

Question

I'm using apollo-client and connecting to an express server using that's using express-jwt for authentication via the header. My current client side components look like this: App -> Login.
Here's what my client side initialization file looks like (index.js). I've omitted unnecessary code for brevity:
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem('token');
return {
headers: {
...headers,
Authorization: token ? `Bearer ${token}` : null
}
};
});
const client = new ApolloClient({
link: authLink.concat(new HttpLink({ uri: '/graphql' })),
cache: new InMemoryCache()
});
That's basically setting up Apollo middleware that checks for a token in localStorage and adds it to the header on each subsequent request so that my logged in user can be authenticated. Here's my top-level App component (which is using react-router v4 - irrelevant code ommited):
class App extends Component {
render() {
const { currentUser } = this.props.data;
console.log(currentUser);
return (
<Switch>
<Route
path="/login"
render={routeProps => <Login {...routeProps} {...this.props} />}
/>
</Switch>
);
}
}
export default graphql(currentUserQuery, {
options: { fetchPolicy: 'network-only' }
})(withRouter(App));
As you might guess, when my App component is created it calls the currentUserQuery to retrieve the current user from my graphql endpoint. Here's the relevant code for my Login component:
class Login extends Component {
handleSubmit = async e => {
e.preventDefault();
this.props
.mutate({
variables: { email: this.state.email, password: this.state.password }
})
.then(result => {
const { jwt } = result.data.login;
if (jwt) {
localStorage.setItem('token', jwt);
this.props.history.push('/');
return;
}
})
.catch(error => {
console.log(error.message);
});
};
}
export default graphql(userLoginMutation)(Login);
My problem is that once my userLoginMutation succeeds, I'd like to route back to my App component and expect to see my currentUser object there. Unfortunately the App component does not trigger a new graphql query to attempt to get the currentUser object when I route back to it. I also tried to use Apollo's refetchQueries method on the login mutation to try and refetch the current user, but that runs the query before the login promise is finished and the token is not yet in the middleware, so the request does nothing. It's worth noting that if I simply do a hard refresh on the page, I get access to my currentUser object because it is pulling the token from localStorage and placing it in the middleware properly.
Any help or advice would be appreciated.

Answer 1

We need a way to trigger the only refetch after localStorage is updated, but before you navigate away. Here's one way to do that: Wrap your Login component with another HOC for the currentUser query:
export default compose(
graphql(userLoginMutation),
graphql(currentUserQuery),
)(MyComponent)
Now your component's props will include both mutate and data, so we can do something like:
this.props.mutate({
variables: { email: this.state.email, password:this.state.password}
})
.then(result => {
const { jwt } = result.data.login;
if (jwt) {
localStorage.setItem('token', jwt);
return this.props.data.refetch()
}
// if there's no jwt, we still want to return a Promise although
// you could do Promise.reject() instead and trigger the catch
return Promise.resolve();
})
.then(() => this.props.history.push('/'))
.catch(error => {
console.log(error.message);
});