UI 不反映突变后的变化
UI not reflecting changes after mutation
我正在使用 QueryRenderer
在我的应用程序中填充编辑表单。数据还显示在整个页面的其他 DOM 元素中。然后我通过突变将值保存回表单提交。一切都很好,除了我的 UI 没有反映后记的变化。这是我的初始查询:
query EditPlanDialogQuery($planId: Int!) {
planByPlanId(planId: $planId) {
nodeId
...fields
}
allSchedules {
nodes {
...fields
}
}
}
那么我的mutation和wrapper函数定义如下:
mutation EditPlanDialogMutation($input: UpdatePlanInput!) {
updatePlan(input: $input) {
plan {
...fields
}
}
}
...
editPlan = (values: any) => {
const {
nodeId,
...otherValues
} = values;
const variables = {
input: {
nodeId: nodeId,
planPatch: { ...otherValues },
},
};
commitMutation(
environment,
{
mutation,
variables,
onCompleted: (response, errors) => alert(response),
onError: err => alert(err),
}
);
}
同样,数据已正确保存到数据库中,但是显示数据的其他 DOM 元素未呈现以反映更改。我想简单的更新 Relay
处理这个?无论如何,根据他们的文档,情况应该如此。我试着弄乱 updater
回调,最终让页面更新,但它看起来很笨重。感谢任何建议,谢谢!
不确定您得到的是什么字段,但我猜您不会从突变中得到 id。
您总是需要询问节点的 ID,以便中继可以匹配商店中更新的节点。节点的 id 必须命名为 id(不是 nodeId)
mutation EditPlanDialogMutation($input: UpdatePlanInput!) {
updatePlan(input: $input) {
plan {
id
...fields
}
}
}
我正在使用 QueryRenderer
在我的应用程序中填充编辑表单。数据还显示在整个页面的其他 DOM 元素中。然后我通过突变将值保存回表单提交。一切都很好,除了我的 UI 没有反映后记的变化。这是我的初始查询:
query EditPlanDialogQuery($planId: Int!) {
planByPlanId(planId: $planId) {
nodeId
...fields
}
allSchedules {
nodes {
...fields
}
}
}
那么我的mutation和wrapper函数定义如下:
mutation EditPlanDialogMutation($input: UpdatePlanInput!) {
updatePlan(input: $input) {
plan {
...fields
}
}
}
...
editPlan = (values: any) => {
const {
nodeId,
...otherValues
} = values;
const variables = {
input: {
nodeId: nodeId,
planPatch: { ...otherValues },
},
};
commitMutation(
environment,
{
mutation,
variables,
onCompleted: (response, errors) => alert(response),
onError: err => alert(err),
}
);
}
同样,数据已正确保存到数据库中,但是显示数据的其他 DOM 元素未呈现以反映更改。我想简单的更新 Relay
处理这个?无论如何,根据他们的文档,情况应该如此。我试着弄乱 updater
回调,最终让页面更新,但它看起来很笨重。感谢任何建议,谢谢!
不确定您得到的是什么字段,但我猜您不会从突变中得到 id。 您总是需要询问节点的 ID,以便中继可以匹配商店中更新的节点。节点的 id 必须命名为 id(不是 nodeId)
mutation EditPlanDialogMutation($input: UpdatePlanInput!) {
updatePlan(input: $input) {
plan {
id
...fields
}
}
}