query icon indicating copy to clipboard operation
query copied to clipboard

Data tree won't stay expanded in Data Explorer in devtools

Open mathias-berg opened this issue 3 years ago • 6 comments

Describe the bug

The data tree in devtools won't stay open, it just minimizes almost right away. It seems like it won't remember the open/close state and goes back to the initial one (closed).

This started happen in version 3.34.17 and is still visible in the latest version 3.39.1.

I will attach two videos of this, one from version 3.34.16 that works as it should and one from 3.39.1 that doesn't work as it should.

Look at the Elements tab in Chrome devtools in the video, you will see a lot of rerenders which doesn't happen in version 3.34.16 and lower. When those rerenders happen, the tree minimizes right away.

Your minimal, reproducible example

https://codesandbox.io/s/affectionate-lederberg-kw876z

Steps to reproduce

Open devtools, expand some data in Data Explorer. It will minimize itself instead of stay open.

Expected behavior

I expect the data tree to stay open.

How often does this bug happen?

Every time

Screenshots or Videos

Version 3.34.16 https://user-images.githubusercontent.com/26097801/172307897-09f274c6-d017-4f7c-bf18-d29f0f532201.mov

Version 3.39.1 https://user-images.githubusercontent.com/26097801/172308444-23d6bb04-2d58-4fea-a0aa-79311fb5c603.mov

Platform

  • macOS - version 12.3
  • Electron - version 19.0.1
  • React Native Web - 0.17.7

react-query version

v3.39.1

TypeScript version

v4.3.5

Additional context

No response

mathias-berg avatar Jun 07 '22 06:06 mathias-berg

I just tried it out in our first codesandbox example, and it works just fine?

https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/simple

can you please provide some way to reproduce the issue other than some videos?

TkDodo avatar Jun 07 '22 06:06 TkDodo

I did test it in codesandbox also, but could not reproduce it there either. The change happened between version 3.34.16 and version. 3.34.17 so something has been changed between those versions. I have a very data intensive app that refetches a lot of data every 5 seconds. It could be related to that, but I will try to create a new Codesandbox that simulates my app to see if this happens.

mathias-berg avatar Jun 07 '22 07:06 mathias-berg

yeah, seems like a refetch will collapse the explorer. do you want to investigate the issue? FYI, in 3.34.17, this issue was released:

  • https://github.com/TanStack/query/pull/2949

so it could be very well related.

@Liam-Tait FYI

TkDodo avatar Jun 07 '22 07:06 TkDodo

I just tried to set refetchInterval to a low number in useQuery in that codesandbox that you linked to and I could reproduce it there as well.

mathias-berg avatar Jun 07 '22 07:06 mathias-berg

@mathias-berg then please add that codesandbox to the issue description

TkDodo avatar Jun 07 '22 07:06 TkDodo

Fixed! Added the codesandbox to the description.

mathias-berg avatar Jun 07 '22 07:06 mathias-berg