Refetch query ignores recent change to local storage

Intended outcome:

When using useMutation we are able to manually call the mutation and execute a sychronous action right after such as a write to local storage.

Actual outcome:

If a refetch query is specified, it seems that recent local storage is not up to date. The refetch query is performed on an outdated local storage not detecting the recent entry into local storage.

How to reproduce the issue:

apollo setup

import { cache } from 'libraries/apollo/cache';
import { resolvers } from 'libraries/apollo/resolvers';
import withApollo from 'next-with-apollo';

const authLink = setContext((_, { headers }) => {
  const mytoken= localStorage.getItem('mytoken'); // // <----- this should have been set on just finished mutation but is still empty

  return {
    headers: {
      ...headers,
      Authorization: token ? `Bearer ${mytoken}` : "",
    }
  }
});


function createClient({ headers }) {
  return new ApolloClient({
    link: authLink.concat(createHttpLink({ uri: 'http://localhost:2222',  credentials: 'include' })),
    cache: cache,
    resolvers: resolvers
  })
}

export default withApollo(createClient);

mutation action

const response = yield call(authInMutation, {
  variables: {
    username: email,
    password: password
  }
});
localStorage.setItem("mytoken", response.data.access_token) // <----- write to local storage after successful sign in

queries & mutations

const AUTH_IN_MUTATION = gql`
  mutation AUTH_IN_MUTATION($email: String!, $password: String!) {
    auth_in(input: { email: $email, password: $password }) {
      message
    }
  }
`;

const AUTH_REFRESH_QUERY= gql`
  query AUTH_REFRESH_QUERY{
      session
  }
`;

const [authInMutation, { loading, data, error }] = useMutation(AUTH_IN_MUTATION , {
  refetchQueries: [{
    query: AUTH_REFRESH_QUERY // <--- refetch this query after successful sign in
  }]
});

Versions

  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 15.8.0 - ~\scoop\apps\nodejs\current\node.EXE
    Yarn: 1.22.10 - ~\scoop\apps\nodejs\current\bin\yarn.CMD
    npm: 7.5.1 - ~\scoop\apps\nodejs\current\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.54)
  npmPackages:
    @apollo/client: ^3.3.11 => 3.3.11
    next-with-apollo: ^5.1.1 => 5.1.1

[newtoniumx3]

I’m having a hard time re-creating a simpler environment as its got some complex config with nextjs, apollo and redux-saga all together. This could potentially be related to the integration with saga and the flow of execution.

Although upon closer look, isn’t it normal that the refetch occurs during the mutation call? Since it’s part of the mutation execution configuration? If it didn’t refetch during that call, how then would you instruct it to refetch the queries at a later time?

I’m going to debug this a little more and try to make this into a separate repo, if I can’t reproduce today I’ll close this today until I can. Thank you for your assistance.

[newtoniumx3]

I decided to switch to cookie based for now which resolves the issue as the storing of the cookie happens behind the scenes.