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

Question

我正在尝试GraphQL Apollo在 API中使用，以便在我的项目subscriptions 中更快、更实时地更新。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 订阅获取组件的实时更新吗？

Answer 1

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

更新：

您正在尝试更改React Props！

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

但previousResult是只读的！

德尔邮政：

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