apollo graphql UI is not updating after refetch

Question

In a react login component, I'd like to refetch and update the navbar component once login is successful.

const loginUser = () => {
    props.mutate({
      variables: {
        input: { email, password },
      },
      refetchQueries: [{ query: GET_ME }],
    });
  };

I can see the login and re-fetch in network tab, and both return 200 with proper status. But the navbar still displays the old data.

Here is my navbar component.

export const Header = props => {
  return <div>Header {JSON.stringify(props.data)}</div>;
};

export default graphql(GET_ME)(Header);

And apolloClient:

export const client = new ApolloClient({
  link: createHttpLink({
    credentials: 'include',
    uri: 'http://localhost:8080/api/graphql',
  }),
  cache: new InMemoryCache(),
});

Answer 1

Try adding

 options: {
      awaitRefetchQueries: true
 },

to your props.mutate next to refetchQueries and variables.

Queries refetched using options.refetchQueries are handled asynchronously, which means by default they are not necessarily completed before the mutation has completed. Setting options.awaitRefetchQueries to true will make sure refetched queries are completed before the mutation is considered done (or resolved). options.awaitRefetchQueries is false by default.