GraphQL Relay多标签页Store同步：组件重渲染问题求助

核心问题在于：跨标签页同步RecordSource数据后，Relay的Store未触发内部的notify机制，导致订阅组件无法感知数据变化。以下是具体实现方案：

1. 基于BroadcastChannel实现跨标签页通知同步 #

扩展Store类，利用BroadcastChannel实现标签页间的notify事件传递：

class CrossTabStore extends Store {
  constructor(recordSource, environment) {
    super(recordSource, environment);
    this.broadcastChannel = new BroadcastChannel('relay-cross-tab-sync');
    
    // 监听其他标签页的notify事件
    this.broadcastChannel.onmessage = (event) => {
      if (event.data.type === 'RELAY_NOTIFY') {
        // 触发当前Store的notify，传递sourceOperation参数
        this.notify(event.data.sourceOperation);
      }
    };
  }

  // 重写notify方法，同步广播事件到其他标签页
  notify(sourceOperation) {
    super.notify(sourceOperation);
    this.broadcastChannel.postMessage({
      type: 'RELAY_NOTIFY',
      sourceOperation: sourceOperation,
    });
  }
}

优先使用BroadcastChannel而非localStorage，因为它是同源标签页通信的原生API，无需处理存储读写的冗余逻辑。

2. 关联RecordSource更新与Store通知 #

在你的RecordSource扩展类中，完成跨标签页数据同步后，确保触发对应sourceOperation的通知传递。例如，当从其他标签页同步数据时，提取mutation对应的sourceOperation并通过广播发送，让目标标签页的Store触发更新。

3. 验证订阅组件的依赖正确性 #

确认订阅组件的查询字段完全覆盖了更新的数据项——Relay仅会在订阅追踪的字段发生变化时触发组件重渲染。可通过Relay DevTools检查组件的订阅依赖，确保字段未被遗漏。

4. 测试验证 #

1. 执行yarn json-graphql-server启动后端服务
2. 执行yarn start启动应用
3. 打开两个应用标签页，在标签1执行mutation操作，观察标签2的订阅组件是否自动渲染最新数据

内容的提问来源于stack exchange，提问作者Fez Vrasta