How to Cancel Previous API Calls When Updating Query Params in Angular with TanStack Query

I have multiple dropdowns on a page, and each selection updates the query parameters in the URL, triggering an API call via TanStack Query.

The issue arises when I change multiple dropdowns quickly:

1. 
   Selecting a value in the first dropdown updates the URL and triggers an API call.
   
   
2. 
   While the first API call is in progress, selecting values in other dropdowns appends more query parameters to the URL and triggers new API calls.
   
   
3. 
   Consequently, multiple API calls are made, even though only the latest selection should be processed.
   

I want to ensure that whenever a new dropdown value is selected, any previous ongoing API calls are canceled, so only the latest request is executed.

What I've Tried:

I explored using switchMap with RxJS, but since I'm using TanStack Query, I'm looking for an approach within its ecosystem.

I checked if TanStack Query has built-in mechanisms for canceling previous queries when parameters change but couldn't find a clear solution.

Question:

How can I ensure that only the latest API call is executed when updating query parameters dynamically with TanStack Query in Angular, while canceling any previous pending requests?

Additional Context:

I referred to the TanStack Query Angular documentation on query cancellation, which explains that TanStack Query supports request cancellation by providing an AbortSignal to the query function. However, I'm uncertain how to implement this in my specific scenario with multiple rapidly changing dropdowns.

Continue reading...