You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
(the data updates twice shortly after each other at 1:16 because i had a third tab open, see "Additional context")
Platform
Chrome 124.0.6367.208 on MacOS 14.3 (also confirmed in Firefox on Windows 11)
Tanstack Query adapter
react-query
TanStack Query version
5.39.0
TypeScript version
5.2.2
Additional context
My implementation still has one significant inefficiency:
open three tabs instead of two
hide the query in one of them, and invalidate there. now both of the other windows will refetch
ideally, only one refetch would be necessary. i could imagine achieving this through either "borrowing" the query from an instance that has it, or by keeping track of invalidation across instances and making only one of them refetch
Other considerations:
@TkDodo mentioned in this discussion that "the broadcastQueryClient plugin just assumes the same queryClients in all tabs". Not quite sure what this means. If it were possible to share an actual QueryClient, would it not become unnecessary to pass messages between tabs? But if that is somehow possible, it would be a much better solution.
I would be open to work on this if you agree on the intended behaviour
The text was updated successfully, but these errors were encountered:
Thanks for the reproduction. I think the issue is mostly that we are listening to updated and removed events, but not added events. So after a query has been removed, we sync that, but if we add a new Query, we don't. Wouldn't the fix be to simply listen to the added event somewhere here and then broadcast that, too?
(obviously not the correct implementation, just a demo)
edit: tried adding the added event that runs queryCache.build when received, still same behaviour. i think for this to work, added would need to add a fake QueryObserver to the query in the tab receiving the message, and removed would need to remove that queryObserver again, and additionally each new tab would need to know the present state of the other tabs, not just receive new messages from that point onward. seems difficult to implement with the current architecture - the fundamental problem is that tabs are sharing the state of the QueryClient, but not their QueryObservers.
Describe the bug
When using
broadcastQueryClient
:Your minimal, reproducible example
(no stackblitz as their containerization seems to break broadcast channels, but see "Steps to reproduce" for a repo, also I've recorded a video demo)
Steps to reproduce
Sample repo: https://github.com/c-ehrlich/broadcast-invalidation-demo
To see the bug
cd before
,pnpm i
,pnpm dev
To see a demo of my rough fix
cd after
,pnpm i
,pnpm dev
Expected behavior
(not sure what the intended behaviour is, but these would be my expectations for the broadcastClient)
How often does this bug happen?
Every time
Screenshots or Videos
https://www.loom.com/share/e7da8b5d3cdb4b36a3fbf076d7ccb6b8
(the data updates twice shortly after each other at 1:16 because i had a third tab open, see "Additional context")
Platform
Chrome 124.0.6367.208 on MacOS 14.3 (also confirmed in Firefox on Windows 11)
Tanstack Query adapter
react-query
TanStack Query version
5.39.0
TypeScript version
5.2.2
Additional context
My implementation still has one significant inefficiency:
Other considerations:
The text was updated successfully, but these errors were encountered: