UI 不反映突变后的变化

Posted 2023-03-08

【中文标题】UI 不反映突变后的变化

【英文标题】：UI not reflecting changes after mutation

【发布时间】：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 没有要求它

如果不清楚，请随时询问。希望对你有帮助

【参考方案1】：

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

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

【讨论】：

我尝试在初始查询和突变中选择nodeId，但没有运气。感谢您的意见。

你能把字段名 nodeId 改成 id 吗？当我遇到类似问题时，它对我有用

解决了这个问题。具体来说，将 nodeId 更改为 id 并返回补丁中更改的字段。如果你更新你的答案，我会接受。

很高兴它起作用了，我更新了我的答案。 （当 id 被命名为 _id 时我遇到了类似的问题）