Axios: Ability to override individual configuration

[usersina]

Feature request

I sometimes need to do more than the given default options. For example, adding a custom config option to extend the custom axios instance's behavior.

Concrete example: File upload progress

1. Problem

A generated upload hook function with a react-query client and a custom axios instance looks like this:

export const useUploadProjectFilesHook = () => {
  const uploadProjectFiles = useCustomInstance<string[]>();

  return (projectId: string, uploadProjectFilesBody: UploadProjectFilesBody, subpath = "operations") => {
    const formData = new FormData();
    formData.append("projectFileRequest", uploadProjectFilesBody.projectFileRequest);
    uploadProjectFilesBody.files.forEach((value) => formData.append("files", value));

    return uploadProjectFiles({
      url: `/${subpath}/packet/files/upload/${projectId}`,
      method: "post",
      headers: { "Content-Type": "multipart/form-data" },
      data: formData,
    });
  };
};

It would then be used as follows in the application code:

const uploadFilesMutation = useUploadProjectFiles();

The problem here is that if I want to track the upload progress, I currently have no way of doing this.

2. Possible Solution

Achieving this is possible by potentially providing additional configuration information to the internally called hook function.

const uploadFilesMutation = useUploadProjectFiles({
  axiosConfig: {
    onDownloadProgress(progressEvent) {},
    onUploadProgress(progressEvent) {},
  }
})

export const useUploadProjectFilesHook = <T>(axiosConfig?: AxiosRequestConfig<T>) => {
  const uploadProjectFiles = useCustomInstance<string[]>();

  return (projectId: string, uploadProjectFilesBody: UploadProjectFilesBody) => {
    const formData = new FormData();
    formData.append("projectFileRequest", uploadProjectFilesBody.projectFileRequest);
    uploadProjectFilesBody.files.forEach((value) => formData.append("files", value));

    return uploadProjectFiles({
      url: `/${subpath}/packet/files/upload/${projectId}`,
      method: "post",
      headers: { "Content-Type": "multipart/form-data" },
      data: formData,
      ...axiosConfig, // notice the spread operator
    });
  };
};

Related issues

• https://github.com/anymaniax/orval/issues/918
• https://github.com/anymaniax/orval/issues/869
• https://github.com/anymaniax/orval/issues/870

[soartec-lab]

Hi, @usersina

It varies by client, so please refer to your client's reference. As a workaround, it might be possible to reference the http client directly. I checked some client references, but unfortunately it didn't seem possible to access the response headers. Also consider using the HTTP client directly as a workaround.