UI 不反映突变后的变化答案

【问题标题】：UI not reflecting changes after mutationUI 不反映突变后的变化
【发布时间】：2018-09-23 00:37:18
【问题描述】：

我正在使用QueryRenderer 在我的应用程序中填充编辑表单。数据还显示在整个页面的其他 DOM 元素中。然后，我通过突变将值保存回表单提交。一切都很好，除了我的用户界面没有反映事后的变化。这是我的初始查询：

    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 回调，最终让页面更新，但它看起来很笨拙。任何建议表示赞赏，谢谢！

【问题讨论】：

当我遇到这样的问题时，通常是由于两件事：1）前端使用的项目数据没有作为突变有效负载（即 id）返回； 2）在组件中，relay prop 没有直接用于渲染内容，而是存储在 state 或任何其他变量中，因此 prop.relay 已更新但 state 没有。尝试检查是否是您的情况。让我知道它是否有帮助
@soutot 感谢您的意见。你能详细说明你的第一点吗？至于第二个，我将中继道具传递给子组件并直接使用它进行渲染。再次感谢！
当然！在第一种情况下，我的意思是当您编写突变的 GraphQL 时，您可以向其中添加有效负载，这意味着在突变完成后，它将返回您在有效负载中请求的任何数据。例如，假设您触发了 AddUserMutation，有效负载可以是用户的 id 和名称，它们是模型中的现有字段。但是，如果您不在前端使用此有效负载（即您只显示用户电子邮件），则在变异完成后您的数据将不会更新。请注意，“在前端使用”意味着您的 graphql 没有要求它
如果不清楚，请随时询问。希望对你有帮助

标签： javascript reactjs graphql relay relaymodern

【解决方案1】：

不确定你得到了什么字段，但我猜你没有从突变中得到 id。您总是需要询问节点的 ID，因此中继可以匹配存储中更新的节点。并且节点的id必须命名为id（不是nodeId）

mutation EditPlanDialogMutation($input: UpdatePlanInput!) {
    updatePlan(input: $input) {
        plan {
            id
            ...fields
        }
    }
}

【讨论】：

我尝试在初始查询和突变中选择nodeId，但没有运气。感谢您的意见。
你能把字段名 nodeId 改成 id 吗？当我遇到类似问题时，它对我有用
解决了这个问题。具体来说，将 nodeId 更改为 id 并返回补丁中更改的字段。如果你更新你的答案，我会接受。
很高兴它起作用了，我更新了我的答案。（当 id 被命名为 _id 时我遇到了类似的问题）