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}` || '',
},
};
});
const link = ApolloLink.from([authMiddleware, httpLink]);
export const client = new ApolloClient({
link,
cache: new InMemoryCache(),
});
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",
This is where I wrap my component with ApolloProvider
import { ApolloProvider } from '@apollo/react-hooks';
import { client } from './config/graphql.ts';
ReactDOM.createRoot(document.getElementById('root')!).render(
<ApolloProvider client={client}>
<React.StrictMode>
<App />
</React.StrictMode>
</ApolloProvider>
My data fetch req
const response = await axios.post('http://localhost:4000/graphql', {
query: GET_USERS,
});
but nothing work as you see my header don’t have the Authorization key
I figured out what cause this so I will put my answer here for anyone come across my case
I was calling the query wrong in redux action
Error
const response = await axios.post('http://localhost:4000/graphql', {
query: GET_USERS,
});
Correct
const { data, error } = await client.query({
query: GET_USERS, // The GraphQL query
});
so this should depend on the client I created
export const client = new ApolloClient({
link,
cache: new InMemoryCache(),
});
6
Authorization in headers should be in lowercase “authorization” and set your method to below one for better error handling.
const authMiddleware = new ApolloLink(
(operation, forward) =>
new Observable((observer) => {
let handle;
Promise.resolve(operation)
.then((oper) => request(oper))
.then(() => {
handle = forward(operation).subscribe({
next: observer.next.bind(observer),
error: observer.error.bind(observer),
complete: observer.complete.bind(observer),
});
})
.catch(observer.error.bind(observer));
return () => {
if (handle) handle.unsubscribe();
};
}));
const request = async (operation) => {
const data = localStorage.getItem("token");
let token = null;
if (data) {
token = data;
}
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : "",
},
})};