如何在两个不同Relay Connection中同时增删共享节点并解决游标赋值问题

根因说明 #

ConnectionHandler.createEdge 仅会基于传入的node生成对应类型的Edge实例，不会自动继承mutation返回的原始edge携带的cursor值，因此手动创建的新edge默认cursor字段为空。

修复步骤 #

• 从mutation返回的原始noteEdge中提取已经存在的cursor值
• 手动给新生成的两个Edge实例设置cursor属性后再插入connection

修复后的完整updater代码 #

updater: store => {
  const rootCon = ConnectionHandler.getConnection(store.get('client:root'), 'RootNotesConnection_notes');
  const userCon = ConnectionHandler.getConnection(store.get(userId), 'UserNotesConnection_notes');
  const payload = store.getRootField('createNote');
  const newEdge = payload.getLinkedRecord('noteEdge');
  const newNote = newEdge.getLinkedRecord('node');
  // 提取原始edge的cursor
  const cursor = newEdge.getValue('cursor');
  
  const newRootEdge = ConnectionHandler.createEdge(store, rootCon, newNote, 'QueryNotesEdge');
  const newUserEdge = ConnectionHandler.createEdge(store, userCon, newNote, 'UserNotesEdge');
  // 手动给新edge赋值cursor
  newRootEdge.setValue(cursor, 'cursor');
  newUserEdge.setValue(cursor, 'cursor');
  
  ConnectionHandler.insertEdgeAfter(rootCon, newRootEdge);
  ConnectionHandler.insertEdgeAfter(userCon, newUserEdge);
}

补充：批量删除实现 #

如果需要同时删除两个connection中的对应笔记，可以直接调用ConnectionHandler.deleteEdge匹配node id删除：

updater: store => {
  const rootCon = ConnectionHandler.getConnection(store.get('client:root'), 'RootNotesConnection_notes');
  const userCon = ConnectionHandler.getConnection(store.get(userId), 'UserNotesConnection_notes');
  // 此处为示例，替换为你删除接口实际返回的被删除笔记ID
  const deletedNoteId = store.getRootField('deleteNote').getValue('deletedNoteId');
  ConnectionHandler.deleteEdge(rootCon, deletedNoteId);
  ConnectionHandler.deleteEdge(userCon, deletedNoteId);
}

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