Promise.abort() is not a function for LazyQuery

[AsuraKev]

Hi there,

I am using the RTK Lazy query and call the abort on unmount to terminate any pending process. Please refer to examples below

A) This works

 const [
    fetch,
    { isFetching, isUninitialized, data: paginationResult, error: searchError },
  ] = useLazyAQuery();


useEffect(() => {
  const promise = fetch();

return () => promise.abort() 
},[...dependencies])

B) This doesnt work

const [
    fetch,
    { isFetching, isUninitialized, data: paginationResult, error: searchError },
  ] = useLazyAQuery();

const callSearch = () => {
 return fetch();
}
useEffect(() => {
  const promise = callSearch();

return () => promise.abort() 
},[...dependencies])

any idea as to why?

thanks :)

[phryneas]

Not from that code.

But I gotta ask... are you really just doing that to abort? Do you actually, really, benefit from that over just using useQuery and not caring about the abortion? Chances are that it will not save your backend any work, and in many situations even cause it additional work because someone navigating back to the same component will then trigger the same request twice.

[AsuraKev]

Hey @phryneas, thanks for the quick reply. In my case my backend api is actually receiving a cancellationToken which will terminate the fetch processes (Which sometime can take sometime e.g a search request).

From my example i dont understand why changing to example B wouldnt work. Even though i dont know how to Type the returnType of fetch() but it should still return the same object as you would if you directly invoke fetch()?

thanks

[phryneas]

The code you are showing here is pretty much identical and if A works, B should too. I assume that your real application code works differently.

Btw., fetch and promise as variable names make it incredibly hard to read.

[AsuraKev]

thanks, The issue seems to be resolved after removing the async from the callSearch()