disabled label not updating in the devtools

[TkDodo]

Describe the bug

As of recently, the devtools show a disabled label when all observers of a query are disabled. However, this label doesn't update dynamically.

To Reproduce Steps to reproduce the behavior:

1. sandbox: https://codesandbox.io/s/serverless-currying-js20q?file=/src/index.js
2. Make sure devtools are open
3. Toggle enabled via the button

devtools still look like this (no disabled label):

4. close the devtools, and open them again

--> they now look good

Expected behavior the correct enabled state should always be reflected in the devtools

[TkDodo]

alright, this is not the easy fix that I thought it would be. devtools subscribe to the queryCache, but there is no QueryCacheNotifyEvent for when the options of an observer change. disabling a query changes nothing in the cache itself 🤔

[TkDodo]

one quick workaround would be to add a reload devtools button somewhere to ensure that the devtools are up-to-date

[armandabric]

I just get caught with this one. I spend some time to ensure my query was disabled event if it's not shown by the devtools. Did you have an idea to get this fixed? Maybe only in v4 if this need to much change

[TkDodo]

@armandabric the devtools subscribe to the queryCache, and the cache emits events that we can listen to. Events are:

• queryAdded
• queryRemoved
• queryUpdated
• observerAdded
• observerRemoved

there is no event for observerUpdated, but that is the only thing that changes when the enabled option changes. So I don't see a good way to make this work at the moment.

[DamianOsipiuk]

@TkDodo Adding observerOptionsUpdated event to queryCache and sending it in setOptions of queryObserver after updateQuery would do? https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L171

[TkDodo]

Yes this sounds about right 👍