Axios Base Query for RTK Query (redux toolkit)

axiosBaseQuery.js

import axios from 'axios'

export const axiosBaseQuery =
  ({ baseUrl, prepareHeaders }) => {
    return async ({ url, method, body: data, params, ...rest }, api) => {

      try {
        // this to allow prepare headers 
        if (prepareHeaders) {
          axios.interceptors.request.use(function (config) {
            const newHeaders = prepareHeaders(config.headers, api);
            config.headers = { ...config.headers, ...newHeaders }
            return config;
          })
        }

        const result = await axios({ url, baseURL: baseUrl, method, data, params, ...rest, signal: api.signal })
        return {
          data: result.data,
          meta: {
            headers: result.headers,
            status: result.status,
            config: result.config,
            request: result.request,
          }
        }
      } catch (axiosError) {
        let err = axiosError
        return {
          error: {
            status: err.response?.status,
            data: err.response?.data || err.message,
            headers: err.response?.headers
          },
        }
      }
    }
  }

export default axiosBaseQuery

Do you have an example of how to use the prepareHeaders with this axiosBaseQuery? I keep getting headers.set is not a fucntion.

here is the .ts version

import axios, { AxiosRequestConfig, AxiosError, AxiosHeaders } from 'axios';
import { BaseQueryFn } from '@reduxjs/toolkit/query';

interface AxiosBaseQueryArgs {
  baseUrl: string;
  prepareHeaders?: (headers: AxiosHeaders, api: any) => AxiosHeaders;
}

interface AxiosBaseQueryParams {
  url: string;
  method: AxiosRequestConfig['method'];
  body?: any;
  params?: Record<string, any>;
  [key: string]: any;
}

export const axiosBaseQuery =
  ({ baseUrl, prepareHeaders }: AxiosBaseQueryArgs): BaseQueryFn<AxiosBaseQueryParams> =>
  async ({ url, method, body: data, params, ...rest }, api) => {
    try {
      // this to allow prepare headers 
      if (prepareHeaders) {
        axios.interceptors.request.use(function (config) {
          const newHeaders = prepareHeaders(config.headers as AxiosHeaders, api);
          config.headers = newHeaders;
          return config;
        });
      }

      const result = await axios({
        url,
        baseURL: baseUrl,
        method,
        data,
        params,
        ...rest,
        signal: api.signal,
      });

      return {
        data: result.data,
        meta: {
          headers: result.headers,
          status: result.status,
          config: result.config,
          request: result.request,
        },
      };
    } catch (axiosError) {
      const err = axiosError as AxiosError;
      return {
        error: {
          status: err.response?.status,
          data: err.response?.data || err.message,
          headers: err.response?.headers,
        },
      };
    }
  };

export default axiosBaseQuery;

Type '{ [x: string]: any; Accept?: AxiosHeaderValue | undefined; "Content-Length"?: AxiosHeaderValue | undefined; "User-Agent"?: AxiosHeaderValue | undefined; "Content-Encoding"?: AxiosHeaderValue | undefined; Authorization?: AxiosHeaderValue | undefined; 'Content-Type'?: ContentType | undefined; }' is not assignable to type 'AxiosRequestHeaders'.
Type '{ [x: string]: any; Accept?: AxiosHeaderValue | undefined; "Content-Length"?: AxiosHeaderValue | undefined; "User-Agent"?: AxiosHeaderValue | undefined; "Content-Encoding"?: AxiosHeaderValue | undefined; Authorization?: AxiosHeaderValue | undefined; 'Content-Type'?: ContentType | undefined; }' is missing the following properties from type 'AxiosHeaders': set, get, has, delete, and 23 more.ts(2322)