如何从两个不同的中继连接中删除共享节点?

Question

我正在使用Node建立一个简单的Relay/GraphQL应用程序。

在根级，我有一个名为'notes'的连接，它对数据库中的所有笔记进行分页。在我的user对象上，我有一个注释连接，用于分页用户创建的所有注释。

const rootNotesId = ConnectionHandler.getConnectionID('client:root', 'RootNotesConnection_notes');
const userNotesId = ConnectionHandler.getConnectionID(queryData?.me?.id, 'UserNotesConnection_notes');

const rootNotes = usePaginationFragment(graphql `
fragment NotesRoot_notes on Query @refetchable(queryName: "NotesRootQuery") {
notes(first: $count, after: $cursor) @connection(key: "RootNotesConnection_notes") {
edges {
node {
...Note_note
}
}
}
}
`, queryData);

const userNotes = usePaginationFragment(graphql`
fragment NotesUser_notes on Query @refetchable(queryName: "NotesUserQuery") {
me {
id
notes(first: $count, after: $cursor) @connection(key: "UserNotesConnection_notes") {
edges {
node {
...Note_note
}
}
}
}
}
`, queryData);

如何在客户端同时向两个连接添加或删除注释?我有两种不同的边类型，我认为这段代码可以工作:

const [commit, isInFlight] = useMutation(graphql `
mutation NotesCreateMutation($input: createNoteInput!) {
createNote(input: $input) {
noteEdge {
cursor,
node {
id
user {
username
}
content
}
}
}
}
`);

const handleButtonClick = () => {
if (!isInFlight) {
commit({
variables: {
input: {
content: newNoteInput
}
},
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');
debugger;
const newRootEdge = ConnectionHandler.createEdge(store, rootCon, newNote, 'QueryNotesEdge');
const newUserEdge = ConnectionHandler.createEdge(store, userCon, newNote, 'UserNotesEdge');
ConnectionHandler.insertEdgeAfter(rootCon, newRootEdge);
ConnectionHandler.insertEdgeAfter(userCon, newUserEdge);
}
});
setNewNoteInput('');
}
}

我在调试中唯一能发现的是光标从未设置为新边。在调试器中遍历这段代码会发现newRootEdge之前的所有变量解析都很好

Answer 1

这个成功了。感谢这个线程为一个很好的解决方案:https://github.com/facebook/relay/issues/2761

const handleButtonClick = () => {
if (!isInFlight) {
commit({
variables: {
input: {
content: newNoteInput
}
},
updater: store => {
const rootCon = ConnectionHandler.getConnection(store.get('client:root'), 'RootNotesConnection_notes');
const payload = store.getRootField('createNote');
const newRootEdge = payload.getLinkedRecord('noteEdge');
const prevRootEdges = rootCon.getLinkedRecords('edges');
const nextRootEdges = [...prevRootEdges, newRootEdge];
rootCon.setLinkedRecords(nextRootEdges, 'edges');

const userCon = ConnectionHandler.getConnection(store.get(userId), 'UserNotesConnection_notes');
const newNote = newRootEdge.getLinkedRecord('node');
const newUserEdge = ConnectionHandler.createEdge(store, userCon, newNote, 'UserNotesEdge');
newUserEdge.setValue(newRootEdge.getValue('cursor'), 'cursor');
const prevUserEdges = userCon.getLinkedRecords('edges');
const nextUserEdges = [...prevUserEdges, newUserEdge];
userCon.setLinkedRecords(nextUserEdges, 'edges');
}
});
setNewNoteInput('');
}
}