How can I add a dynamic value to the request header?

[slamdunkYYY]

I currently use GraphQL with RTK Query, and the type is generated via @graphql-codegen/typescript-rtk-query as your suggestion. So that means the api has been injected in the generated file.

Here is my api base setup.

export const client = new GraphQLClient(gqlBaseUrl);

export const api = createApi({
  baseQuery: graphqlRequestBaseQuery({
    client,
  }),
  endpoints: () => ({}),
});

Then the auto generated file is like:

const injectedRtkApi = api.injectEndpoints({
  endpoints: (build) => ({
    ApiEndpointTest: build.query<ApiEndpointTestQuery, ApiEndpointTestQueryVariables>({
      query: (variables) => ({ document: ApiEndpointTestDocument, variables })
    }),
......

Now, I want to add a dynamic value api-trigger-location to the request header. Initially, I want to modify it in onQueryStarted and pass the apiTriggerLocation via the request arg, based on this:
https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-rtk-query#extending-generated-code
However, since the apiTriggerLocation is for the header only, it's not on the GQL schema, so cannot pass the TS check.

So I create a wrapper to use useEffect to set the header:

export function useApiEndpointTestWithHeader(
  reqVariables: ApiEndpointTestQueryVariables & {
    apiTriggerLocation: string | undefined;
  },
  requestOptions?: { skip?: boolean } | undefined
) {
  const { apiTriggerLocation, ...variables } = reqVariables;

  useEffect(() => {
    if (apiTriggerLocation) {
      client.setHeader('api-trigger-location', apiTriggerLocation);
    }
  }, [apiTriggerLocation]);

  return useApiEndpointTestQuery(variables, requestOptions);
}

But this way will add the api-trigger-location to all GraphQL request, not only the apiEndpointTest query. I cannot use prepareHeaders in createApi either since this is a dynamic value, it should pass from an argument.

Could you please give me some suggestions?