Cancelation not working with useSuspenseQuery

[romain-trotard]

Describe the bug

Hello,

I have implemented cancelation in my project, but it does not seem to work when working with Suspense and useSuspenseQuery / useSuspenseQueries hooks.
I have tested with useQuery and it works perfectly.

I don't see any mention in the documentation that the cancelation does not work with suspense, and don't see at first sight any reason it would be impossible to cancel queries when working with Suspense.

Thanks for the library which is really cool :)

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-5dtu8c?file=src%2FApp.tsx

Steps to reproduce

1. Click on the increment button that will simulate multiple call to get the person information for the id: count
2. See in the console that there is no log concerning the cancelation of the request

ps: it's also possible to simulate the unmounting of the component while a request is running (it does not cancelled the request too)

Expected behavior

I expect that running queries are cancelled

How often does this bug happen?

Every time

Screenshots or Videos

Cancelation working with useQuery:

Enregistrement.de.l.ecran.2024-08-12.a.14.33.11.mov

Cancelation not working with useSuspenseQuery:

Enregistrement.de.l.ecran.2024-08-12.a.14.32.25.mov

Platform

• OS: Mac OS 14.6.1
• Browser: Chrome 127.0.6533.100

Tanstack Query adapter

react-query

TanStack Query version

5.51.23

TypeScript version

5.5.4

Additional context

No response

[TkDodo]

Hm, I think I know why that's the case: We only trigger a cancelation as soon as the last observer unsubscribes. But with suspense, the observer never subscribes in the first place, because we throw the promise to react before that happens in useSyncExternalStore.

I need to think about if that's even possible or if it's a known limitation that it doesn't work with suspense.

[TkDodo]

after discussing this on twitter, I don't think there is a good way to solve this:

https://x.com/phry/status/1825828334502113295

We can mark it as a known limitation in the docs. Would you like to contribute that?

[romain-trotard]

Hey Dominik
Thank you for the exploration and the explanation of the problem.
I can definitely contribute by marking it as a known limitation in the documentation :)