Kiota + Axios

[vitto-moz]

Hi, Kiota Community!
Have anyone tried to use Axios as an HttpClient for Kiota FetchRequestAdapter. Axios has different Response type, that is not aligned with Fetch Response - that makes the Kiota fails, as it don't have the functionality for handling such type of response. Have I missed something and Kiota actually have the way to use axios as an HttpClient?

Here below is the code that I had to add to make things done (convertAxiosResponseToFetchResponse is the trick) :

const convertAxiosResponseToFetchResponse = <T = any>(axiosResponse: AxiosResponse<T>): Response => {
  const fetchResponse = {
    ok: axiosResponse.status >= 200 && axiosResponse.status < 300,
    status: axiosResponse.status,
    statusText: axiosResponse.statusText,
    headers: new Headers(axiosResponse.headers as Record<string, string>),
    url: axiosResponse.config.url || '',
    redirected: false,
    type: 'basic' as ResponseType,
    bodyUsed: false,
    body: new ReadableStream({
      start(controller) {
        controller.enqueue(axiosResponse.data)
        controller.close()
      },
    }),
    async json() {
      if (this.bodyUsed) throw new TypeError('Already read')
      this.bodyUsed = true
      return axiosResponse.data
    },
    async text() {
      if (this.bodyUsed) throw new TypeError('Already read')
      this.bodyUsed = true
      return JSON.stringify(axiosResponse.data)
    },
    async blob() {
      if (this.bodyUsed) throw new TypeError('Already read')
      this.bodyUsed = true
      const data = JSON.stringify(axiosResponse.data)
      return new Blob([data], { type: 'application/json' })
    },
    async arrayBuffer() {
      if (this.bodyUsed) throw new TypeError('Already read')
      this.bodyUsed = true
      const data = JSON.stringify(axiosResponse.data)
      const buffer = new ArrayBuffer(data.length)
      const view = new Uint8Array(buffer)
      for (let i = 0; i < data.length; i++) {
        view[i] = data.charCodeAt(i)
      }
      return buffer
    },
    async formData() {
      if (this.bodyUsed) throw new TypeError('Already read')
      this.bodyUsed = true
      const formData = new FormData()
      const json = axiosResponse.data as Record<string, any>
      if (typeof json === 'object') {
        Object.keys(json).forEach((key) => formData.append(key, json[key]))
      }
      return formData
    },
    clone() {
      return convertAxiosResponseToFetchResponse(axiosResponse)
    },
  }

  return fetchResponse
}

export const getApiClient = (axios: AxiosInstance): MachinesApiClient => {
  const httpClient = new HttpClient((request: string, init: RequestInit) => {
    return axios.request({ url: request, method: init.method }).then((response) => {
      return convertAxiosResponseToFetchResponse(response)
    })
  })

  const requestAdapter = new FetchRequestAdapter(
    new BaseBearerTokenAuthenticationProvider({
      getAuthorizationToken() {
        return Promise.resolve('token')
      },
      getAllowedHostsValidator: () => new AllowedHostsValidator(new Set([apiUrl])),
    }),
    undefined,
    undefined,
    httpClient,
  )

  requestAdapter.baseUrl = apiUrl
  return createApiClient(requestAdapter)
}

[baywet]

Hi @vitto-moz
Thanks for using kiota and for sharing this great snippet!
Although axios is a popular http client for JavaScript, it's the first time the community brings it up in a kiota context.
And we haven't done testing with axios ourselves, focusing on the fetch implementation that's more broadly available and doesn't require additional dependencies.
However, it'd be interesting to have a community maintained axios implementation in case people want to swap things out, and I think with the mapping code you've provided, it should be fairly straight forward to stand up by:

1. taking a dependency on the Microsoft-provided http package
2. defining an "AxiosRequestAdapter" class that derives from the FetchRequestAdapter, leverages this mapping, accepts axios middleware handler and an axios client.

If this is something you'd be interested in authoring, @andreaTP might be able to help you set up a repo under https://github.com/kiota-community