I want to set auth in req header to specific value but after I tried different methods and check req from browser my key is not in the req header
I am using Reactjs ,vite ,@apollo/client and running inside docker
import {
ApolloClient,
InMemoryCache,
HttpLink,
ApolloLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
const httpLink = new HttpLink({
uri: 'http://localhost:4000/graphql',
});
I tried with setContext
const authMiddleware = setContext(async (_, { headers }) => {
const token = localStorage.getItem('token');
return {
headers: {
...headers,
'Authorization': `Bearer ${token}` || '',
},
};
});
I tried with ApolloLink
const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers
operation.setContext(() => ({
headers: {
'Authorization': `Bearer ${token}` || '',
},
}));
return forward(operation);
});
const link = ApolloLink.from([authMiddleware, httpLink]);
export const client = new ApolloClient({
link,
cache: new InMemoryCache(),
});
My used version for react and @apollo/client
"@apollo/client": "^3.11.8",
"react": "^18.3.1",
but nothing work as you see my header don’t have the Authorization key
2
Answers
Authorization in headers should be in lowercase "authorization" and set your method to below one for better error handling.
That
setContext
approach should be fine. Headers should be lowercase but will automatically connected. What I don’t see: you create thatauthMiddleware
withsetContext
, but to you actually hook it up to yourApolloClient
? Please show that part.