[英]Relay not updating after doing subsequent mutations
Currently, we stumbled across a problem doing mutation in relay modern. 目前,我们偶然发现了中继现代中发生变异的问题。 We have a diary which contains many entries. 我们有一本日记,其中包含许多条目。 Whenever user add a entry which day of diary doesn't exist, we also create a diary before create a entry. 每当用户添加不存在日记的条目时,我们也会在创建条目之前创建日记。 Everything works as expected but the UI doesn't update immediately after the mutations. 一切都按预期工作,但UI在突变后不会立即更新。 Here's the code. 这是代码。
AddDiaryMutation AddDiaryMutation
import { commitMutation, graphql } from 'react-relay';
const mutation = graphql`
mutation AddDiaryMutation($input: AddDiaryInput!) {
createDiary(input: $input) {
diary {
id
...EntryList_entries
}
}
}
`;
let clientMutationId = 0;
const commit = (environment, { date }, callback) =>
commitMutation(environment, {
mutation,
variables: {
input: {
date,
clientMutationId: clientMutationId++
}
},
onCompleted: response => {
const id = response.createDiary.diary.id;
callback(id);
}
});
export default { commit };
AddEntryMutation will get the id from AddDiaryMutation response to add entry. AddEntryMutation将从AddDiaryMutation响应中获取ID以添加条目。
import { commitMutation, graphql } from 'react-relay';
import { ConnectionHandler } from 'relay-runtime';
const mutation = graphql`
mutation AddEntryMutation($input: AddEntryInput!) {
createEntry(input: $input) {
entryEdge {
node {
id
project {
name
}
speaker {
name
}
}
}
}
}
`;
function sharedUpdater(store, diaryId, newEdge) {
const diaryProxy = store.get(diaryId);
const conn = ConnectionHandler.getConnection(diaryProxy,
'EntryList_entries');
ConnectionHandler.insertEdgeAfter(conn, newEdge);
}
let clientMutationId = 0;
const commit = (environment, { diaryId, ...rest }, callback) =>
commitMutation(environment, {
mutation,
variables: {
input: {
...rest,
clientMutationId: clientMutationId++
}
},
updater: store => {
const payload = store.getRootField('createEntry');
const newEdge = payload.getLinkedRecord('entryEdge');
sharedUpdater(store, diaryId, newEdge);
},
onCompleted: () => callback()
});
export default { commit };
EntryList fragment EntryList片段
fragment EntryList_entries on Diary {
entries(first: 20) @connection(key: "EntryList_entries", filters: [])
{
edges {
node {
...Entry_entry
}
}
}
}
Entry fragment 进入片段
fragment Entry_entry on Entry {
id
project {
name
}
speaker {
name
}
}
I had issues with this updater also. 我也有与此更新程序的问题。 I recommend console.log on every variable and see where the chain brakes. 我建议在每个变量上使用console.log并查看链条制动的位置。 I have issues with my getConnection method (and i am changing my schema to include edges also). 我的getConnection方法有问题(并且我正在更改架构以包括边)。 You can also console log the store from your environment to check the records there. 您也可以从环境中控制台登录存储,以检查那里的记录。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.