How do I handle a single-request asynchronous query?

[MaddoScientisto]

I have an atypical query that rather than doing a fetch request it calls a function, sets an event and waits for the event to get called before retrieving and returning the data.
This is because the react application is hosted in a webview2 winforms control and I'm actually calling functions on the host application, waiting for the host to return the data,
The problem is that unlike a typical web API this specific function is asynchronous but can't be parallelized, which means only a single request can ever be processed at a time. The operation can be canceled (and I have already the facilities in place on the host to do so) and unless canceled each new request will overwrite the host-stored results, which is why the query caching helps a lot in this case.

Because of this I need to make sure that if this query is requested again while it's waiting, it should request cancellation of the previous query and then run a new one, the useQuery instance is on a context, which (I hope) means there's only ever a single source for it, there's no worrying that multiple controls may call this function at the same time, however since it's on a searchbar it may be requested again before the previous one is done.

I haven't been able to figure this out, what would be the best way to have this behavior?

This is my current query, I already handled canceling but right now the cancellation is never done because calling the query again results in just another query, parallel to this.

const collections = useQuery(queryDatabase.collections()); // this is a regular Fetch query

const { data, isLoading, isError, isSuccess, isIdle, error } = useQuery(
		[ `search`, inputText, searchFilters ], // searchFilters is an object rather than a string
		newSearchCall,
		{
			enabled: !collections.isLoading && collections.isSuccess && collections.data && inputText !== '', // Waits for collection query to have data and for the input text to be a valid string
			meta: {
				cache: false, // This prevents saving the cache. Needed to avoid restoring stale data on new app starts, it's used with a PersistQueryClientProvider and checked in its shouldDehydrateQuery function
			},
			cacheTime: 5 * 60 * 1000, // 5 minutes, it's already set to not persist
		}
	);
	
	function newSearchCall({signal}) {

		let cancelSearch = false;

		if (signal.aborted) {
			cancelSearch = true;
			Plugin.postMessage({ Type: 'CancelSearch' });
			console.log('Search aborted');
		}
		

		return new Promise((resolve, reject) => {
			// Call Plugin.postMessage() and wait for results to be ready
			const message = wrapSearch(inputText, searchFilters);
			Plugin.postMessage(message);
			
			// Function to handle the results when ready
			async function handleResults() {
				if (cancelSearch) {
					window.removeEventListener('searchResultsReady', handleResults);
					return reject('Search cancelled');
				}
				let results = normalizeKeys(JSON.parse(await Plugin.hostObjects.searchResults.LastResultsJson));
				let resultsCount = await Plugin.hostObjects.searchResults.TotalResults;

				resolve({ results, resultsCount });
				// Remove the event listener after resolve
				window.removeEventListener('searchResultsReady', handleResults);
			}
			
			// Listen for the showDetailsAsync function to be called
			window.addEventListener('searchResultsReady', handleResults);
		});
	}

[samhirtarif]

This might help.
https://tanstack.com/query/v4/docs/react/guides/query-cancellation#manual-cancellation

[MaddoScientisto]

I see, I'll try that, thank you

[MaddoScientisto]

I tried adding this to the previous function and changed inputText to SearchText in the query but with no success, the abort controller never gets consumed

const queryClient = useQueryClient();
const [ searchText, setSearchText ] = useState('');
	
	useEffect(() => {
	
		if (searchText !== inputText) {
			console.log('Cancelling query');
			queryClient.cancelQueries({queryKey: [ 'search' ], exact: false}).then(() => {
				console.log('Query canceled, setting new search text to', inputText);
				setSearchText(inputText);
			});
		}
	
	}, [ inputText ]);

In the console I see this:

Cancelling query
Query canceled, setting new search text to whatever text I'm searching for

I expected to see the "Search aborted" message from the search promise, when signal.aborted is checked but it's not happening, also the query never becomes active, the enabled clause for the query looks like this enabled: collections.isLoading && collections.isSuccess && collections.data && searchText !== ''" and yet it's as if it's not detecting the state change from searchText

[samhirtarif]

@MaddoScientisto - I've created an example here for you to follow.

If you comment line 40, you'll see that responses for the previous queries get logged too, since they are not cancelled

Do let me know if you have any questions

[MaddoScientisto]

Thank you, it wasn't as straightforward from the example because fetch and axios handle cancellation automatically but in my case I had to do it manually, just checking for signal.aborted sufficed.
Also I realized far too late I had a bunch of mistakes in my code that made things worse, like missing a negation on the enable condition and not returning the data properly from the promise.
Thanks to the example I managed to do it without any explicit cancellations, now the cancellation is properly called and the final search function looks like this:

const innerSearch = async (text, signal) => {
		const data = await new Promise((resolve, reject) => {
			window.addEventListener('searchResultsReady', handleResults);
			const message = wrapSearch(inputText, searchFilters);
			Plugin.postMessage(message);
			
			async function handleResults() {
				if (signal.aborted) {
					window.removeEventListener('searchResultsReady', handleResults);
					reject(new Error('Cancelled'));
				}
				else {
					let results = normalizeKeys(JSON.parse(await Plugin.hostObjects.searchResults.LastResultsJson));
					let resultsCount = await Plugin.hostObjects.searchResults.TotalResults;
					resolve({ results, resultsCount });
				}
				// Remove the event listener after resolve
				window.removeEventListener('searchResultsReady', handleResults);
			}
		});

		if (signal.aborted) {
Plugin.postMessage({ Type: 'CancelSearch' }); // Tell the plugin to cancel its search
			throw new Error('Search aborted');
		}
		
		return data;
	};