Cancel or abandon current ongoing queries on navigation

[manelio]

I'm facing a situation but I'm not sure if it's related to react-query or React concurrent mode (or even react-location).

Briefly: I'm building a multipage app with React 18, react-location and react-query. Each route requires retrieving information from an API. Some requests could take too long for the users, who should be able to navigate to other page if they want.

I crated a CodeSandbox to replicate the situation. There are 3 routes. Query for routes /0 and /1 is instant. Query for route /2 take 5 seconds:

https://codesandbox.io/s/busy-vaughan-20lcfz?file=/src/App.js

Click sequentially the links for routes 0, 2 and 1.

Click on page 0: page 0 is loaded instantly
Click on page 2: since navigate (from react-location) is called from startTransition and query uses suspense, nothing changes until page 2 query ends (3 seconds)

Problem comes here. If the user decides not to wait until request ends and clicks on page 1, the expected behaviour is to instantly navigate to page 1 and abandon or cancel whatever ongoing activity. But the current behaviour is the user has to wait until page 2 request ends.

Could you provide some direction? Apologies in advance in case this is not related to react-query.

[TkDodo]

it would be good if you could narrow down the potential issue. You can probably check if it's react-location related by removing everything react-query related and just returning raw promises. Then you can check if it's concurrent features related by removing startTransition.