Add JSON to array does not work in wire adapter

Question

Here is a link to the code I have working: https://codepen.io/reuel3/pen/EMEGQy It works as expected there.

I get an error message when attempting same thing in wire adapter function:

[LWC component's @wire target property or method threw an error during value provisioning. Original error:
[Cannot assign to read only property 'values' of object '#<Object>']]

code:

    @wire(getPicklistValuesByRecordType, { objectApiName: LINEITEM_OBJECT, recordTypeId: '$recordTypeId' })
        getPickListOptions( {error, data}) {
            try {
                if (!!data) {
                    this.pickListOptions = Object.create(data);   //Object.assign({}, data);
//error on next line
                    this.pickListOptions.picklistFieldValues.Body__c.values = [...this.pickListOptions.picklistFieldValues.Body__c.values, {attributes: null, label:"--None--", validFor: [], value: ""}];
                } else if(!!error) {
                    console.log('error----2---', JSON.stringify(error));
                }
            } catch (err) {
                console.error('err---3----', JSON.stringify(err));
            }
        }

The data from pickListOptions is in the link above. How can I get around the read-only array?

Answer 1

As per the documentation:

Objects passed to a component are read-only. To mutate the data, a component should make a shallow copy of the objects it wants to mutate.

This, in part, makes handling shared caching of the responses easier and more efficient within the LWC framework. Recall that the cached values can in principle be shared by many LWC instances in a page. This is demonstrated nicely by the way the uiRecordApi service can share the state of the underlying record across the whole (record) page, refreshing all the components that fetch data for the same record using this service) up-to-date when a fetch for one requires (some of) the record data to be fetched again - e.g. due to an expired cache.