用于删除和更新的 React GraphQL 订阅

Posted 2023-03-10

【中文标题】用于删除和更新的 React GraphQL 订阅

【英文标题】：React GraphQL Subscriptions for Delete and Update

【发布时间】：2018-07-01 22:38:21

【问题描述】：

我正在尝试在 API subscriptions 中使用 GraphQL Apollo，以便在我的 React 项目中更快、更实时地更新。我正在使用"subscriptions-transport-ws": "^0.8.2"。但是删除和更新会引发错误。我对反应和 JS 很陌生，无法完成这项工作。我尝试寻找解决方案，但还没有成功！

这是基本的前端布局：

这是graphql subscriptions的相关反应组件代码：

    componentWillReceiveProps(nextProps) 
        if (!this.subscription && !nextProps.data.loading) 
                let  subscribeToMore  = this.props.data
                this.subscription = [subscribeToMore(
                
                    document: postDeleted,
                    updateQuery: (previousResult,  subscriptionData ) => 
                     const delPost = subscriptionData.data.postDeleted;
                     const mainData = previousResult.Posts;               

                     let post = mainData.find(post => post.id == delPost.id);
                     let updatedList =  mainData.splice(post, 1);
                     return updatedList;
                    ,
                ),
                subscribeToMore(
                
                    document: postUpdated,
                    updateQuery: (previousResult,  subscriptionData ) => 
                        previousResult.Posts = previousResult.Posts.map((p) => 

                        if(p.id === subscriptionData.data.postEdited.id)                     
                        return subscriptionData.data.postEdited
                         else 
                        return p;
                        
                    );
                    return previousResult;
                    ,
                
                )]
        
    

但我面临以下错误：

删除按钮错误： TypeError: Cannot add/remove sealed array elements

更新按钮错误： Cannot assign to read only property 'Posts' of object '#<Object>'

有人可以帮我获取带有 graphql 订阅的组件的实时更新吗？

【参考方案1】：

您的问题与 GraphQL 或订阅无关！

更新：

您正在尝试更改 React Props！

previousResult.Posts = previousResult.Posts.map((p) => ...

但 previousResult 是只读的！

德尔邮政：

mainData.splice(post, 1) 是delPost 的问题！ splice 改变了变量，而mainData 是常量！

【讨论】：

好的，那么您建议什么解决方案？是的，我尝试过更新订阅..但是对于删除操作，我将数据处理为mainData 和delPost..这样的变量也不起作用。

mainData.splice(post, 1) 是delPost 的问题！ splice 更改变量，而 mainData 是 const！