Axios: cannot customize the headers for requests

[FLYSASA]

I have generated my code, like this

but it seems I cannot configure headers for a specific API endpoint individually Content-Encoding': 'gzip. Is there any solution ?

My current temporary solution is：

export const useRecommendComponents = (queryOptions?: any) => {
  const mutation = usePostApiProjectsIdSimilarity({
    mutation: {
      ...queryOptions,
      mutationFn: async ({ id, data }) => {
        const paramsStr = JSON.stringify(data);
        const compressed = pako.gzip(encodeURIComponent(paramsStr));
        return axiosInstance({
          url: `/api/Projects/${id}/similarity`,
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Content-Encoding': 'gzip',
          },
          data: compressed,
        });
      },
    },
  });
  return mutation;
};

[melloware]

i use Axios Request Interceptors to add custom headers. You could check the path and add the right content encoding.

/**
 * Axios utlity class for adding token handling and Date handling to all request/responses.
 */
export default class AxiosInterceptors {
	// hold instances of interceptor by their unique URL
	static requestInterceptors = new Map<string, number>();
	static responseInterceptors = new Map<string, number>();

	/**
	 * Configures Axios request/reponse interceptors to add JWT token.
	 *
	 * @param {AxiosInstance} instance the Axios instance to remove interceptors
	 * @param {string} token the JWT token to add to all Axios requests
	 */
	static setupAxiosInstance = (instance: AxiosInstance, token: string) => {
		const appKey = instance.defaults.baseURL!;
		EnvUtils.debug(`Configuring Axios request/response interceptors for: ${appKey}`);
		// Axios request interceptor to add JWT token
		const tokenRequestInterceptor = instance.interceptors.request.use(
			(config) => {
				if (token) {
					const headers = config.headers || {};
					headers.Authorization = `Bearer ${token}`;
				}
				return config;
			},
			(error) => {
				return Promise.reject(error);
			}
		);
		EnvUtils.debug(`Axios Token Request Interceptor: ${tokenRequestInterceptor}`);
		AxiosInterceptors.requestInterceptors.set(appKey, tokenRequestInterceptor);

		// Axios response interceptor to translate String to Date
		const dateResponseInterceptor = instance.interceptors.response.use((originalResponse) => {
			const auditHeader = originalResponse.headers['audit-event-id'];
			if (auditHeader) {
				window.sessionStorage.setItem('audit-event-id', auditHeader);
				window.localStorage.setItem('audit-event-id', auditHeader);
			}
			FormatUtils.translateJsonDates(originalResponse.data);
			return originalResponse;
		});
		EnvUtils.debug(`Axios Date Response Interceptor: ${dateResponseInterceptor}`);
		AxiosInterceptors.responseInterceptors.set(appKey, dateResponseInterceptor);
	};

	/**
	 * Cleanup Axios on sign out of application.
	 *
	 * @param {AxiosInstance} instance the Axios instance to remove interceptors
	 */
	static teardownAxiosInstance = (instance: AxiosInstance) => {
		const appKey = instance.defaults.baseURL!;
		EnvUtils.warn(`Cleaning up Axios removing all interceptors for: ${appKey}`);
		instance.interceptors.request.clear();
		instance.interceptors.response.clear();
	};
}

[FLYSASA]

Thank you very much for your answer. It's a good idea to add specific headers by checking the path in the axiosInstance interceptor. However, it would be even better if we could extend the orval-generated react-query request hooks to support passing axios configurations,

for usage example:

import {
  postApiProjectsIdSimilarity,
  usePostApiProjectsIdSimilarity,
} from '@/api/projects/projects';

export const useRecommendComponents = (queryOptions?: any) => {
  const mutation = usePostApiProjectsIdSimilarity({
    mutation: {
      ...queryOptions,
      mutationFn: async ({ id, data }) => {
        const paramsStr = JSON.stringify(data);
        const compressed = pako.gzip(encodeURIComponent(paramsStr));
        return postApiProjectsIdSimilarity(id, compressed);
      },
    },
    axiosConfig: {
      headers: {
        'Content-Type': 'application/json',
        'Content-Encoding': 'gzip',
      },
    },
  });
  return mutation;
};

for orval generate api: