Request Cancellation

[stijndeschuymer]

I can't figure out how request cancellation is supported, or how the examples from tanstack query convert to ngneat query.

This is some pseudo code of what I tried, use case is canceling multiple request when typing in a search box, but none of the requests get cancelled. Thanks for checking this out!

return this.useMutation((todos) => {
        return from(this.queryClient.cancelQueries(['todos'])).pipe(switchMap(() => this.api.updateTodos(todos)));
});
        

[luii]

Wouldnt it be more effective to first call the cancelQueries outside of the mutation and then return the mutation with the todos update?
But a bit more context to your problem you're facing would be good.

[stijndeschuymer]

It seems like 'Request Cancelation' means, cancelling ongoing refetches, but is not meant to be used to cancel the previous ongoing update request. An example would be https://stackblitz.com/edit/rxjs-searchbox-example?file=src%2Fapp%2Fapp.component.ts
where switchMap actually cancels the previous network request

[luii]

@ngneat/query in itself has nothing to do with query cancelation, its just a wrapper for the existing @tanstack/query, every principle that is described in @tanstack/query should also apply to the Angular Environment. Every example on the docs uses promises from which we know they can be cancled (with a abort signal), observables on the other hand cant be cancled (with them), with the exception of switchMap, unsubscribe, takeUntil and so on.

I think what happens is, as long as you dont call the mutation and try to cancel it, it runs just fine. But as soon as you call it and it cancels the Query a undisposed observable remains, this can be the case if you try to poll inside such a query. Though a bit more context would be nice to determine that.

[luii]

It seems like 'Request Cancelation' means, cancelling ongoing refetches, but is not meant to be used to cancel the previous ongoing update request. An example would be https://stackblitz.com/edit/rxjs-searchbox-example?file=src%2Fapp%2Fapp.component.ts where switchMap actually cancels the previous network request

SwitchMaps nature is to cancel the previous observable emitted by switchMap and switch to the new one, this intended but has nothing to do with @ngneat/query

[stijndeschuymer]

yes because useMutation is exposing a promise and not an observable, you're losing that switchMap behaviour that cancels the previous observable. I thought that was what was meant with 'Request Cancelation' is supported.

[stijndeschuymer]

as for more context:
given this example:
https://stackblitz.com/edit/rxjs-searchbox-example?file=src%2Fapp%2Fapp.component.ts

I would want the same behaviour: the previous network request should be cancelled because of the switchMap, but instead of ajax.get(...), I was looking to use query's useMutation