[REQ] [typescript-axios] Ability to pass cancel token to axios

[swillis12]

Is your feature request related to a problem? Please describe.

There is currently no way to cancel requests in the generated service calls for both Axios and Fetch generators (..that I know of, sorry if this is not true).

Describe the solution you'd like

A way to enable an option to have a cancel token added to the request and ideally be able to reference this cancel token after the request has been made (i.e. return the cancel token somehow).

Describe alternatives you've considered

Currently we have a generic service layer that does this:

export function get<T>(url: string, { params }: any = {}): CancelableAxiosPromise<T> {
  const source = axios.CancelToken.source();
  const axiosRequest: any = axios.get(url, { params, cancelToken: source.token });
  const request: CancelableAxiosPromise<T> = axiosRequest.catch(handleError);
  request[CANCEL] = () => source.cancel(); //Redux-Saga cancel property on request
  return request;
}

Redux-Saga needs the CANCEL property on the request to be able to automatically cancel when using TakeLatest. We use this CANCEL property outside of redux-saga as well if we need to cancel a request.

Additional context

I am open to changing the way we have the cancellation implemented, any suggestions are welcome if I am overcomplicating this. Just trying to piece together how we can take advantage of Codegen since we will be switching to using OpenApi exclusively.

[auto-labeler]

👍 Thanks for opening this issue!
🏷 I have applied any labels matching special text in your issue.

The team will review the labels and make any necessary changes.

[macjohnny]

you could use the typescript-rxjs generator, since RxJS Observables are cancellable

[swillis12]

Thanks @macjohnny for the suggestion. If possible I would like to avoid adding a dependency on RXJS for this.

Right now we have a large codebase that uses the above Axios service layer with a cancel token added to a [CANCEL] property on the promise. Service calls can be used in our Redux Sagas and cancellation is handled automatically by the TAKE_LATEST effect. In other parts of the code these same service calls can be canceled by calling the cancel source.

It would be awesome to be able to cancel with both the Axios and fetch generators. This seems like a basic functionality that many could use!

[macjohnny]

@swillis12 would you like to file a PR to implement this feature?

[swillis12]

@macjohnny I will most-likely try using the -t option as a first-step. Do you know of a good example that I could follow to do this (preferably js or typescript)? Also does -t allow extending of existing templates or would I copy the axios-typescript template (for example) and add my changes to it?

After exploring a custom template I may make a contribution to the project, but so far I haven't seen any interest (odd.. wondering what other people are doing to cancel their rest calls).

[macjohnny]

-t allows you to provide single files in a folder, while for the rest of the templates it will fall back to the ones shipped with openapi generator

[swillis12]

I will give that a try! That's awesome I did not realize that. I can try this out and then if I can think of a feasible way to contribute passing a cancel token as a feature then I'll open a PR.

[takkiraz]

Hello,

I think this issue can be closed as the legacy cancelToken approach is deprecated in Axios in favor of the standard AbortController API.

Axios documentation confirms this: https://axios-http.com/docs/cancellation

Since the OpenAPI generated APIs typically accept standard Axios configuration objects, you can pass the signal object directly to the request configuration:

const controller = new AbortController()

const users = usersApi.getUserById("userId", { signal: controller.signal }).then(
  response => response.data
)

// To cancel the request:
controller.abort()

@macjohnny