Detect changes to localstorage with Vue and Apollo

582 Views Asked by At

I have a Vue app that uses Apollo to make GraphQL queries and mutations. The Apollo client is set up like so:

import ApolloClient, { createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({ uri: '/graphql' });
networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the header object if needed.
    }
    req.options.headers['authorization'] = localStorage.getItem('token') ? localStorage.getItem('token') : null;
    next();
  }
}]);

const client = new ApolloClient({
  networkInterface,
});

When i log into my API and get the access token I have to refresh the page for the Apollo client to recognize that a token now exists in localStorage. Why doesn't apollo detect the token in localStorage?

0

There are 0 best solutions below