2017-07-15 101 views
5

我正在構建一個VueJS應用程序,我正在使用Apollo客戶端通過GrapgQL服務器從數據庫獲取數據。我有一些代碼,看起來像這樣:爲什麼Apollo/GraphQL返回一個不可擴展的對象?

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) 

但是..我不知道它是如何有效地反覆複製這樣的大型數組?這是做這件事的首選方法嗎?

回答

0

我自己並沒有與GraphQL/Apollo一起工作,但我想它會堅持不改變數據的原則,因此對象不可擴展。你可以在你的突變做的就是將數據分配到狀態是這樣的:

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

這將確保該對象最初是深拷貝,並在Vue公司友好的方式,以支持反應之後更新。你可以閱讀更多here

0

我遇到了完全相同的問題。

我最終做的是在將數據發送到Vue commit之前做一個_.cloneDeep。

0

就像你和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); 
+0

Object.assign會給你同樣是你的對象/類型的起訴是深深嵌套的 – vbranden

相關問題