Description

Often times users will have multiple pages or tabs up. this can result in synchronization issues, but can be fixed using BroadcastChannel which lets tabs and pages communicate with one another.
?

Reach for when

You have things that need to be the same on all tabs.

Visualization

Code

const channel = new BroadcastChannel('app-sync');

channel.postMessage({ type: 'notification_read', id: notifId });

channel.onmessage = (event) => {
  if (event.data.type === 'notification_read') {
    queryClient.invalidateQueries(['notifications']);
  }
};