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

这应该有效：

const commentsClone = [...payload.data.comments];

Answer 2

我自己没有使用过 GraphQL/Apollo，但我想它会坚持不改变数据的原则，因此对象不可扩展。您可以在突变中做的是将数据分配给如下状态：

Vue.set(state, 'comments', payload.data.comments)

这将确保对象最初被深度复制，然后以 Vue 友好的方式更新，以支持反应性。你可以在这里阅读更多。

Answer 3

像您和 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); 

Answer 4

我遇到了完全相同的问题。

我最终做的是在将数据发送到 Vue 提交之前执行 _.cloneDeep。