ReactQueryDevtoolsPanel component gets stuck in the "fetching" state

[alexanderson1993]

Describe the bug
For some reason, the ReactQueryDevtools component correctly shows the cache state, while the ReactQueryDevtoolsPanel component remains stuck in the 'fetching' state. The reproduction shows both dev tools running at the same time, but the same behavior happens when only ReactQueryDevtoolsPanel is running.

To Reproduce
Steps to reproduce the behavior:

1. Open up this CodeSandbox https://codesandbox.io/s/dev-tools-panel-bug-fesez?file=/src/index.js
2. Notice that the ReactQueryDevtoolsPanel on the right stays stuck in the "fetching" state while the ReactQueryDevtools component on the bottom updates correctly.
3. Cause stale data to refetch (focus the window, toggle "Hide Users", whatever)
4. The panel remains stuck in "fetching"

Expected behavior
The two ReactQueryDevtools components should be in sync.

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome/Safari
• Version: 3.24.4

[TkDodo]

I didn't know that the ReactQueryDevtoolsPanel is exported for consumers. This is slightly related to #2742. We made a speedup and stoped subscriptions when the panel is closed. It means that the Panel now takes an isOpen property, and the effect to subscribe to changes is only setup when this is true.

This was only meant as a workaround to avoid unnecessary renders of the Panel when it's closed and can be removed when/if #2742 is properly fixed. For now, a workaround would be to pass isOpen to the Panel so that the subscription is set up:

<ReactQueryDevtoolsPanel isOpen />

[alexanderson1993]

Believe it or not, it's recommended by the docs

https://react-query.tanstack.com/devtools#embedded-mode

That's a good workaround, though. Thanks!

[TkDodo]

I would accept a PR that makes isOpen default to true if it's not passed because in the normal devtools, we pass the property depending on initialIsOpen/ the value stored in localhost anyways.

[tannerlinsley]

🎉 This issue has been resolved in version 3.24.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀