Why does Apollo / GraphQL return a non-extensible object?

Question

I am building an application with VueJS and I am using the Apollo client to retrieve data from a database through a GrapgQL server. I have a code that looks like this:

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

Then, in my mutations, I have the following

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

When I try to push another object into an array of comments in another mutation, I get the error "Unable to add property 300, the object is not expanding." I found that the following works

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

But .. I'm not sure how efficient it is to repeatedly copy such large arrays? Is this the preferred way to do this?

Answer 1

I did not work with GraphQL / Apollo itself, but I believe that it will adhere to the principle of not mutating data, therefore, the object is not extensible. What you can do in your mutations is to assign data to the state as follows:

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

This will make sure that the object is initially heavily copied and subsequently updated in a friendly Vue manner to maintain responsiveness. You can read it here .

Answer 2

I ran into the same problem.

As a result, I do _.cloneDeep before sending the data to Vue commit.

Answer 3

Like you and Max, I ran into the same problem, and the only solution for me was to clone the object to

if you are using Lodash ( https://lodash.com/docs/4.17.5#cloneDeep ):

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

if not ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign ):

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