为什么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
    }

当我尝试将另一个对象推入另一个突变的comments数组时,我得到一个错误,上面写着"无法添加属性300,对象不可扩展".我发现以下工作

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

但是......我不确定反复复制像这样的大型数组有多有效？这是首选的方法吗？

Answer 1

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

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

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