Pass an additional option object in fetcher function when using custom axios instance

What are the steps to reproduce this issue?

1. The fetchcer function in generated code is correct with default config

orval.config.ts:

import { defineConfig } from 'orval'

export default defineConfig({
  test: {
    output: {
      mode: 'split',
      target: './swag.ts',
      client: 'react-query',
    },
    input: {
      target: './swagger.json',
    }
  }
})

result:

export const auth = (
     options?: AxiosRequestConfig // here we have an options here
 ): Promise<AxiosResponse<X>> => {
    return axios.get(
      `/api/v1/auth`,options
    );
  }

1. But with custom axios instance config:

export default defineConfig({
  test: {
    output: {
      mode: 'split',
      target: './swag.ts',
      client: 'react-query',
+      override: {
+        mutator: {
+          path: './custom-instance.ts',
+         name: 'customInstance',
+       },
      },
    },
    input: {
      target: './swagger.json',
    }
  }
})

The options param no longer remains…

export const auth = ( // here no options can be passed in
     
 ) => {
      return customInstance<X>(
      {url: `/api/v1/auth`, method: 'get'
    },
      );
    }

What were you expecting to happen?

I want to pass some different option to some request, for example a longer timeout for certain requests. But with custom axios instance it behaves different than default one, it’ll need to make custom axios instance also have fetcher function accept an options object as param.

What versions are you using?

Package Version: v6.7.1

[zoubingwu]

Damn you are right !!! 😂😂

// custom-instance
export const AXIOS_INSTANCE = Axios.create({ baseURL: '<BACKEND URL>' }); // use your own URL here or environment variable

export const customInstance = <T>(config: AxiosRequestConfig, options?: AxiosRequestConfig): Promise<T> => {
  const source = Axios.CancelToken.source();
  const promise = AXIOS_INSTANCE({ ...options, ...config, cancelToken: source.token }).then(
    ({ data }) => data,
  );

  // @ts-ignore
  promise.cancel = () => {
    source.cancel('Query was cancelled');
  };

  return promise;
};

//output
export const auth = (
    
 options?: SecondParameter<typeof customInstance>) => {
      return customInstance<CentralMetaData>(
      {url: `/api/v1/auth`, method: 'get'
    },
      options);
    }

Maybe we should add this to the doc.

[ristomatti]

After some probing, I found out this is already supported from https://github.com/anymaniax/orval/issues/282. 🙂

The solution was maybe not the most obvious one but I was able to get this working by adding a second parameter to the custom client definition then regenerating the code, e.g.:

export const pricingApiClient = async <T>(
  config: AxiosRequestConfig,
  options?: AxiosRequestConfig
): Promise<T> => {
  const defaultConfig: AxiosRequestConfig = {
    ...config,
    baseURL: pricingBaseUrl,
  };
  return cancellableRequest<T>(defaultConfig, options);
};

const cancellableRequest = async <T>(
  config: AxiosRequestConfig,
  options?: AxiosRequestConfig
): Promise<T> => {
  const source = axios.CancelToken.source();
  const promise = axiosInstance({
    ...config,
    ...options,
    cancelToken: source.token,
  }).then(({ data }) => data);

  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  promise.cancel = () => {
    source.cancel('Query was cancelled by React Query');
  };

  return promise;
};