Some part of the query state is lost during channel broadcast

[markivancho]

Describe the bug

App uses broadcastQueryClient utility, components that use the same query lose their query state after opening a new window that triggers the same query.

Adding some context to how I use react-query in my daily job. We are using the default broadcastQueryClient config to sync data if user decides to open app in new tab. In some cases, we utilize isFetchedAfterMount to ensure that user sees the latest data without UI flick. The loading screen is rendered until isFetchedAfterMount is switched to true. On one of the screens we have a link to another part of the app that uses same query. If user click "Open in new tab" on screen that uses isFetchedAfterMount, it will swtich back to false after loading of that query is finished on other tab.

Your minimal, reproducible example

CRA bootstrapped project;

• npm install
• npm start https://github.com/markivancho/react-query-broadcast

Steps to reproduce

Watch the attached video in the repo's readme.

Expected behavior

I would expect that isFetchedAfterMount stays the same, regardless of queryClient syncs between tabs.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS, Chrome Version 102.0.5005.115 (Official Build) (x86_64)

react-query version

4.0.0-beta.23 and 3.39.1

TypeScript version

No response

Additional context

Some console logging of queryObserver of my production app. First one is state of query after loading is finished in first tab. Second is state of query in first tab after loading is finished in second tab

notice that dataUpdateCount of initialState and state in each screenshot, that's where the part of isFetchedAfterMount logic is hidden