Can I override Apollo Client headers from individual queries in my components?

Question

When I initialize my Apollo client, I make an Apollo Link with the header hello: "world". Is there a way to override the hello header value from a component using hooks? I thought this would work but it still uses the Client header:

useQuery(<QUERY>,{
    context:{
        headers:{
            hello: "Canada"
        }
    }
})

Answer 1

Your code seems correct. After doing some testing it appears that it is not possible to overwrite existing headers.

  const { data, loading, error } = useQuery(ALL_GAMES, {
    context: { headers: { authentication: 'some value', test: 'some value' } }
  });

Perhaps if you pass in a whole new client to useQuery - you could create the client using a factory function

Answer 2

I ran into the same issue when trying to override the authorization header of a request. I solved it by spreading operation.getContext().headers when I'm setting the headers in my link. Code:

const authLink = new ApolloLink((operation, forward) => {
    operation.setContext({
      headers: {
        authorization: authToken,
        ...operation.getContext().headers,
      },
    });

    return forward(operation);
  });

Then the code you included should work as expected.