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 takes 5 seconds:
https://codesandbox.io/s/busy-vaughan-20lcfz?file=/src/App.js
Click sequentially the links for routes 0 (instant), 2 (slow) and 1 (instant).
Click on page 0: page 0 is loaded instantly
Click on page 2: since navigate method (from react-location) is called from startTransition and query uses suspense, nothing changes until page 2 query ends (3 seconds). That's correct and expected (in real app there's a global activity indicator).
But the 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?