Relay v11中通过Subscription更新Store时ConnectionHandler.getConnection始终返回undefined的问题

看起来你在尝试通过Subscription更新Relay Store中的连接时遇到了典型的连接匹配问题，我来帮你分析一下可能的原因和解决方案：

核心问题分析 #

ConnectionHandler.getConnection返回undefined通常是因为Relay无法在Store中找到完全匹配的连接记录，主要涉及以下几个关键点：

1. 连接标识不匹配：缺少变量过滤器 #

你的@connection在fragment中使用了动态变量（$count和$cursor），Relay会将这些变量作为连接实例的一部分标识。当你调用getConnection时，如果不传入对应的变量过滤器，Relay无法定位到正确的连接。

2. 初始连接未加载 #

如果useQuery还未完成数据加载，或者searchCompanies返回了null，Store中还没有创建对应的连接记录，自然无法获取到。

3. Owner记录或Key拼写错误 #

虽然你能获取到viewerRecordProxy，但需要确保连接的owner确实是这个User实例，且@connection的key和getConnection的第三个参数完全一致（大小写、命名都不能错）。

具体解决方案 #

步骤1：添加匹配的变量过滤器 #

修改updater中的getConnection调用，传入与初始查询一致的变量作为过滤器：

const connectionRecord = ConnectionHandler.getConnection(
  viewerRecordProxy,
  'CompanyTable_viewer_searchCompanies',
  { first: 10, after: null } // 与useQuery中的count=10、cursor=null完全匹配
);

Relay需要这些参数来区分不同的连接实例（比如不同分页参数下的同一个查询），所以必须严格匹配初始查询的变量。

步骤2：确保初始查询已加载连接数据 #

在useSubscription执行前，确认useQuery已经返回了包含searchCompanies的有效数据：

export default function SearchCompany() {
  const { data, error, loading } = useQuery<SearchCompanyQuery>(query, {
    count: 10, // 修正原代码的语法错误，将count =10改为count:10
    cursor: null,
  });

  // 只有当数据加载完成后再订阅
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data?.viewer?.searchCompanies) return <div>No companies found</div>;

  useSubscription(subscriptionConfig);

  return <CompanyTable data={data} />;
}

这样可以避免在连接还未被添加到Store时触发subscription的updater。

步骤3：验证连接Key的一致性 #

再次确认fragment中的@connection(key: "CompanyTable_viewer_searchCompanies")和getConnection的第三个参数完全一致，没有任何拼写错误或大小写差异——这是最容易忽略的细节。

步骤4：添加新节点到连接（完成更新流程） #

当成功获取到connectionRecord后，你可以将subscription返回的新Company节点添加到连接中：

updater: (store: RecordSourceSelectorProxy) => {
  const viewerRecordProxy = store.getRoot().getLinkedRecord('viewer');
  if (!viewerRecordProxy) return;

  // 获取连接
  const connectionRecord = ConnectionHandler.getConnection(
    viewerRecordProxy,
    'CompanyTable_viewer_searchCompanies',
    { first: 10, after: null }
  );

  if (!connectionRecord) {
    console.warn('Connection not found in store');
    return;
  }

  // 获取subscription返回的新节点
  const newCompany = store.getRootField('companyInserted');
  if (!newCompany) return;

  // 创建新的edge并添加到连接
  const newEdge = store.create(
    `client:newEdge:${newCompany.getValue('id')}`,
    'CompanyEdge'
  );
  newEdge.setLinkedRecord(newCompany, 'node');
  newEdge.setValue('new-cursor', 'cursor'); // 这里可以用服务器返回的cursor，或者生成客户端cursor

  // 将edge添加到连接的edges列表开头或结尾
  ConnectionHandler.insertEdgeBefore(connectionRecord, newEdge);
  // 或者 ConnectionHandler.insertEdgeAfter(connectionRecord, newEdge);
}

额外检查点 #

• 确认你的服务器返回的companyInserted订阅数据包含完整的id字段（Relay需要它来识别节点）
• 检查Relay DevTools，查看Store中是否存在viewer的searchCompanies连接记录，以及对应的key和变量是否匹配

内容的提问来源于stack exchange，提问作者Clément MARTZLOFF