query cancellation for "similar" queries

[githorse]

Say I want to show a month's worth of posts at a time. I have a datepicker widget on my screen that the user uses to select the month. My API looks like this:

GET /posts/20230101/20230131

I can use useQuery like so:

const [range, setRange] = useState<DateRange>(/* wire me up to datepicker /*)

const {data: posts} = useQuery({
  queryFn:  () => fetch(`/posts/${range.start}/${range. end}`),
  queryKey: ['posts', range]
})

But now I have some arrow buttons (⬅️ ➡️) that allow the user to rapidly scroll through the different months. If she clicks rapidly on ⬅️, I'll make a series of fetches:

GET /posts/20230101/20230131
GET /posts/20221201/20221231
GET /posts/20221101/20221130

The first two fetches are not helpful as the user doesn't care about that date range -- she just scrolled past it. I don't want to waste any cycles on that data when it arrives.

What I would like to happen is to be able to say to useQuery, "cancel any in-progress /posts request if you see a different /posts request".

What's the best way to achieve this effect? (I'm not sure if this is a feature request or perhaps just a pattern I'm missing here.)

[samhirtarif]

@githorse - I've created an example here for you: https://stackblitz.com/edit/stackblitz-starters-5vjibp?description=React%20%20%20TypeScript%20starter%20project&file=src%2Findex.tsx,src%2FApp.tsx&title=React%20Starter

You can see the difference if you comment out { signal } on line 34 in the example. When you comment it out and quickly click on + or - you'll see responses console logged for those IDs since the requests are not cancelled. But if it is uncommented then the requests get cancelled before the response is received and logged.

Feel free to discuss further

PS: This doesn't exactly cancel similar queries, but does cancel old queries in the component

[githorse]

Hi @samhirtarif - thanks for the example! I'm a little confused though. As written (i.e. without commenting anything out) I'm not seeing the cancellation happen -- if I click five times as quickly as possible, I see five requests in the log. I'm also not sure conceptually how this would work -- since the queryKey is different each time, how does Tanstack Query know to cancel the old requests?

[samhirtarif]

When you say logs, do you mean the console logs or the network logs? Because the request would initiate and show up in the network tab, but would be cancelled before a response is recieved and logged.

And I am not aware of how exactly this is implemented in tanstack query. But a hunch would be that they execute the provided queryFn in a useEffect and cancel it on state change through the clean up method in that samw useEffect

[TkDodo]

the provided stackblitz works fine for me with regards to cancellation. Not sure why it shows two requests for me (whatever workbox-core is, I guess stackblitz specific thing?), but generally, the code is correct and that's the way you cancel queries :)

[samhirtarif]

I do think the workbox-core requests are stackblitz specific.