How to abort query started in loader?

[crabvk]

I'm using loaders to start fetching data from the server returning objects with promises from loaders, like this:

function recordLoader({ params }) {
  const recordQuery = fetch(`/api/records/${params.id}`)
  return { recordQuery }
}

The problem is when I go back and forth in history the route isn't loading (URL isn't changing) until the previous page data fully loads.
Is there a way to abort pending query when the route is about to change?

[sergiodxa]

Check https://sergiodxa.com/tutorials/abort-async-calls-inside-remix-loaders-and-actions, it's the same for RR than Remix.

[crabvk]

Thank you, but it only works when awaiting in the loader or returning a promise, which is not my case.

[crabvk]

OK, so as far as I understand, if I don't await or return a promise in the loader the loader's request is ended within the return <object> statement. Then the solution is to manually abort the previous query before starting a new one in the loader.