vue.js - 为什么 Apollo/GraphQL 返回一个不可扩展的对象？

Question

我正在使用 VueJS 构建一个应用程序，我正在使用 Apollo 客户端通过 GrapgQL 服务器从数据库中获取数据。我有这样的代码:

    apollo.query({
        query,
        variables
    })
    // context.commit('populateComments', payload) triggers the mutation
    .then(payload => context.commit('populateComments', payload))

然后，在我的突变中，我有以下内容

    populateComments: (state, payload) => { 
        state.comments = payload.data.comments
    }

当我尝试在另一个突变中将另一个对象插入评论数组时，我收到一条错误消息，内容为“无法添加属性 300，对象不可扩展”。我发现以下工作

state.comments = Array.from(payload.data.comments)

但是.. 我不确定像这样重复复制大型数组的效果如何？这是首选的方式吗？

Answer 1

像你和 Max 我也遇到过同样的问题，对我来说唯一的解决方案是在

如果您使用的是 Lodash ( https://lodash.com/docs/4.17.5#cloneDeep ):

const commentsClone = _.cloneDeep(payload.data.comments)

如果不是 ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign ):

const commentsClone = Object.assign({}, payload.data.comments);