Apollo resetStore is not working in Angular client

Question

I am trying to integrate authorization token at the client side. I am passing this token in middleware. When user logout reset the store and then get a new token. Now when I send new request it is still sending the old token(cached)

Here is my code app.module.ts

const networkInterface = createNetworkInterface({
  uri: "http://localhost:3000/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(AUTH_TOKEN);
      next();
    }
  }
]);

export function provideClient(): ApolloClient {
  return new ApolloClient({
    networkInterface,
    dataIdFromObject: (o: any) => `${o.__typename}-${o.id},`
  });
}

When I do logout I have this code

localStorage.removeItem(AUTH_TOKEN);
this._apollo.getClient().resetStore(); 

Then When I make another request it is still taking old token in request headers.

How can I update this with the new token?

Answer 1

I might change the middleware to this:

networkInterface.use([{
    applyMiddleware(req, next) {
        if (!req.options.headers) req.options.headers = {}
        const token = localStorage.getItem('token')
        req.options.headers.authorization = token ? token : null
        next()
    }
}])

Notice the ternary operator in there, token ? token : null. This will ensure the auth header cannot be sent unless the app knows of a token. If your client is still sending it, then the token is not being removed properly.

You could try this quick test also: after logging out, press F12 and type into the browser console: localStorage and see if the token is still in there.

I can't tell by your code, but it looks like you have a variable called AUTH_TOKEN that returns a string of like 'token' or whatever key you use. I just want to explicitly mention that you are removing the token by key, not by value.

Add token: localStorage.setItem('token', 'e47nes45nysde5nue5nu')

Remove token: localStorage.removeItem('token')

If you code is like this:

const AUTH_TOKEN = 'e47nes45nysde5nue5nu'
localStorage.removeItem(AUTH_TOKEN)

Then, that is why it is still making queries with the auth token. I don't think it generates errors in the console if it doesn't find a matching key to remove from localStorage.