Cancel of requests through saga

Question

We provide a drop down option at the top..let's say it has options A B C. Whenever user changes the drop down option, a saga gets triggered which makes around 10 different webapi calls.( A map of calls which get executed in parallel)

We use takeLatest helper in saga watcher. So if user immediately changes the dropdown from A to B., Only calls made via B are consumed at client end as takeLatest aborts saga that got triggered by A.

Now , the problem is though only B's calls are consumed, all the A's promise calls that are in pending, also run to completion. Only saga (because of A) gets aborted but not the api calls. We can see that in network tab. So, if user changes between A B C rather quickly, we would have around 30-40 calls to server. All of those run to completion though we are just interested in completion of last 10 calls. If we see in chrome dev tools, last 10 calls are in queue or stalled until the above ones are done. Isn't there a way to propagate the cancellation from saga(takeLatest level)to axios and there by cancelling promises. Axios docs say about cancellation and tokens but I'm not clear about how to propagate cancel in a redux -Saga and axios environment. How to initiate cancel from saga to axios?

Answer 1

const cancelSource = axios.CancelToken.source()
try {
  yield all([
    call(axios.get, "/api/1", { cancelToken: cancelSource.token }),
    call(axios.get, "/api/2", { cancelToken: cancelSource.token }),
    /// ...
  ])
} finally {
  if (yield cancelled()) {
    yield call(cancelSource.cancel)
  }
}