Set headers in each useQuery or useMutation request (apollo client)

Help
,
1

Hi, currently I’m using ApolloLink from apollo client to set a Bearer token in the header of the request, the issue is when I want to refresh that access token and update my localStorage the token is still the same. I believe this happens because the instance of the client is still the same but I had not found a way to get what I want, please help?
Here is how I’m setting the client.

const authLink = new ApolloLink((operation, forward) => {
  const accessToken = JSON.parse(localStorage.getItem('accessToken') || '');

  operation.setContext(({ headers }: { headers: Headers }) => ({
    headers: {
      ...headers,
      authorization: `Bearer ${accessToken}`,
    },
  }))

  return forward(operation)
})
const httpLink = new HttpLink({
    uri: prodURI,
});

const apiClient = new ApolloClient({
    link: from([errorLink, authLink, httpLink]),
    cache: new InMemoryCache(),
});

export default apiClient;
2

Hey, have you tried moving your localStorage.getItem line into the setContext function? It is called once for each request, but your authLink code is only called a single time at initialization.

1 Like
3

Hey, I didn’t knew that, I will give it a try. thank you!

4

@mindnektar that did it! I had another issues as well but I was able to find them thanks to you sending me in the right direction, really really thanks you save my day.