Apollo Client V2 fetches data the wrong order - node.js

Question

I am building an application which uses authorization with Json Web Tokens. I'm building this application with Node.js, GraphQL and Apollo client V2 (and some other stuff, but those aren't related here). I have created a login resolver and a currentUser resolver that let me get the current user via a JWT. I later use that token and send it in my authorization headers and the results looks something like:
So that part is done! But here's what I'm having trouble with.
Me trying to explain the situation
I'm using React for the frontend part of this project with the Apollo Client V2. And when I do the login mutation I do it like this. With formik I've created my onSubmit:
const response = await mutate({
variables: {
email: values.email,
password: values.password,
},
})
const token = response.data.login.jwt
localStorage.setItem('token', token)
history.push('/') // Navigating to the home page
And this is what I want back with the login mutation (just the token):
export const loginMutation = gql`
mutation($email: String!, $password: String!) {
login(email: $email, password: $password) {
jwt
}
}
`
To get the currentUser's data I've put my currentUser query in my root router file. Please apologize me for naming the component PrivateRoute. I haven't renamed it yet because I can't find a proper name for it. I'm sorry. So in /src/router/index.js I have this:
// First the actual query
const meQuery = gql`
{
currentUser {
id
username
email
}
}
`
...
// A component that passess the currentUser as a prop, otherwise it will be null
const PRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={props => {
return (
<Component
{...props}
currentUser={
rest.meQuery.currentUser ? rest.meQuery.currentUser : null
}
/>
)
}}
/>
)
}
// Another component that uses the meQuery so I later can access it if I use the PrivateRoute component.
const PrivateRoute = graphql(meQuery, { name: 'meQuery' })(PRoute)
// Using the PrivateRoute. And in my Home component I can later grap the currentUser via propsb
const App = () => (
<Router>
<div>
<PrivateRoute exact path="/" component={Home} />
...
In the Home component I grab the prop:
const { data: { loading, error, getAllPosts = [], currentUser } } = this.props
I pass it down to my Navbar component:
<Navbar currentUser={this.props.currentUser} />
And in the Navbar component I take the username if it exists:
const { username } = this.props.currentUser || {}
And then I render it.
This is what I'm having troubles with
My application is currently trying to get the currentUser when I get to the /login route. And after I've successfully loged in I get back the token, but the currentUser query is not being fetched again. Thefore I have to refresh my page to get the current user and all of it's values.
I have also created a little video that demonstrates what my problem is. I believe it will show you more clearly the problem than me trying to type it.
Here's the video: https://www.youtube.com/watch?v=GyI_itthtaE
I also want to thank you for reading my post and that you hopefully are going to help me. I have no idea why this is happening to me and I just can't seem to solve it. I've tried to write this question as best as I can, so sorry if it was confusing to read.
Thanks

Answer 1

I think you might be able to solve this issue by setting the query's FetchPolicy to "cache-and-network". You can read about fetch policies here: "GraphQL query options.fetchPolicy"
in your specific case I think you can update this line
const PrivateRoute = graphql(meQuery, { name: 'meQuery' })(PRoute)
to this:
const PrivateRoute = graphql(meQuery, { name: 'meQuery', options: {fetchPolicy: 'cache-and-network'} })(PRoute)
Explanation
As stated in the documentation, the default policy is cache-first.
currentUser is queried the first time and it updates the cache.
You execute the login mutation, the cache is not updated without
you updating it (read about it here: "Updating the cache after a
mutation").
currentUser query is executed again but due to the default cache-first policy the outdated result will be retrieved only from the cache.
From the official documentation:
cache-first: This is the default value where we always try reading
data from your cache first. If all the data needed to fulfill your
query is in the cache then that data will be returned. Apollo will
only fetch from the network if a cached result is not available. This
fetch policy aims to minimize the number of network requests sent when
rendering your component.
cache-and-network: This fetch policy will have Apollo first trying to read data from your cache. If all the data needed to fulfill your
query is in the cache then that data will be returned. However,
regardless of whether or not the full data is in your cache this
fetchPolicy will always execute query with the network interface
unlike cache-first which will only execute your query if the query
data is not in your cache. This fetch policy optimizes for users
getting a quick response while also trying to keep cached data
consistent with your server data at the cost of extra network
requests.
in addition to these two there are two more policies: 'network-only' and 'cache-only' here's the link to the documentation

Answer 2

for me it worked when I refetched the currentUser query in my login mutation. I added my code below. Maybe it helps:
onSubmit(event) {
event.preventDefault();
const { email, password } = this.state;
this.props
.mutate({
variables: { email, password },
update: (proxy, { data }) => {
// Get Token from response and set it to the localStorage
localStorage.setItem('token', data.login.jwt);
},
refetchQueries: [{ query: currentUser }]
})
.catch((res) => {
const errors = res.graphQLErrors.map(error => error.message);
this.setState({ errors });
});
}