Why does Apollo/GraphQL return a non extensible object?

Question

I'm building an app with VueJS and I'm using Apollo client to fetch data from a database through a GrapgQL server. I have 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 the comments array in another mutation I get an error that reads "Cannot add property 300, object is not extensible". I have found that the following works

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

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

Robbinrobbins

Answer 1

Haven't worked with GraphQL/Apollo myself, but I guess it would hold to the principle of not mutating the data, hence the object not being extensible. What you can do in your mutations is to assign the data to the state like this:

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

This will make sure that the object is initially deep copied and afterwards updated in a Vue friendly way in order to support reactivity. You can read more here.

Tirzah

Answer 2

Like you and Max I've faced the same problem and the only solution for me was to clone the object before

if you're 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); 

Garish

Object.assign will give you the same issue of your object/type is deeply nested – Caras

Answer 3

This should work:

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

Royceroyd

Answer 4

I've faced the exact same problem.

What I ended up doing is doing a _.cloneDeep before I send the data in to Vue commit.

Dillydally