Disabled Suspense Query suspended when same child suspense Query is called

[Kanary159357]

Describe the bug

Enabled=false Suspense Query trigger Suspense when other enabled=true Suspense Query is called

Your minimal, reproducible example

https://codesandbox.io/p/devbox/cool-matsumoto-xdd457?file=%2Fsrc%2FApp.tsx%3A15%2C27

Steps to reproduce

Wrap parent component with suspense, add enabled=false suspense=true Query to Parent Component.
Wrap child componetn with suspense, add same query with parent but enabled option is false to Child Component.

When this component(including parent component and child component) render, it shows Parent Component's Suspense

Expected behavior

I think disabled query should not throw promise to Suspense.

So I think in suspense.ts, shouldSuspend function should include option's enabled property in order not to suspense on disabled query

Or is current behaviour intended?

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

MacOS Sonoma 14.0 M1 Max 32GB
Chrome 119.0.6045.159 arm64

Tanstack Query adapter

react-query

TanStack Query version

4.36.1

TypeScript version

5.3.2

Additional context

No response

[charlotte-bone]

@TkDodo correct me if I'm wrong, but I think that this is working as expected. In version 5 the suspense query option has been totally removed and useSuspenseQuery added, which eliminates the enabled option. In the docs it mentions:

you therefore can't conditionally enable / disable the Query. This generally shouldn't be necessary for dependent Queries because with suspense, all your Queries inside one component are fetched in serial.

https://tanstack.com/query/v5/docs/react/guides/suspense

[Kanary159357]

@TkDodo correct me if I'm wrong, but I think that this is working as expected. In version 5 the suspense query option has been totally removed and useSuspenseQuery added, which eliminates the enabled option. In the docs it mentions:

you therefore can't conditionally enable / disable the Query. This generally shouldn't be necessary for dependent Queries because with suspense, all your Queries inside one component are fetched in serial.

https://tanstack.com/query/v5/docs/react/guides/suspense

#5739 (comment)

The PR that useSuspenseQuery was added, TKDodo said enabled option could be back if needed. So this question could be meaningful when it comes back.

Also, removal of enabled option in V5 is seperate issue from the issue that query does suspense on enabled, suspense options in V4. I wonder why you are talking about V5....

I think it is unpredictable to think that disabled query would suspense on triggering enabled child query so wonder why it is implement like that.

[charlotte-bone]

I'm just questioning if it should be fixed, as it's an experimental feature in v4 and v5 the decision was made to move away from it with a dedicated hook and no enabled option. I just don't want to work on a fix that'll confuse things if it's not the vision for future versions.

@TkDodo knows more about this though. Happy to work on this if it gets the go ahead. Otherwise, perhaps a note in the help docs might be needed.

[TkDodo]

@charlotte-bone is right. I'm personally not gonna look into the experimental v4 version when the decision was already made to remove enabled in v5. It's interactions like this that make it obvious not having enabled for suspense is the right move.