Uncaught TypeError: 'set' on proxy: trap returned falsish for property Name

Question

Am not doing anything fancy, just trying to update a field on Contact in JS of LWC but getting this exception.

Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'Name' throws at mydomain/auraFW/javascript/mhontaYdOya4Y_lBu7v9yg/aura_prod.js:2:27687

HTML Code:

<template>

    <template if:true={wiredContact}>

        {wiredContact.Name}

        <lightning-input value={wiredContact.Name} onchange={updateName}></lightning-input>
    </template>

</template>

JS:

import { LightningElement ,wire,track,api } from 'lwc';
import myContact from "@salesforce/apex/ContactController.fetchContact";

export default class Myrefreshapextest extends LightningElement {


 @track wiredContact;

 @wire (myContact)
        fetchedContact({error, data}){
            if(data){
                console.log(JSON.stringify(data));
                this.wiredContact = data;
            }else if (error){
                console.log(error);
            }
    }

    updateName (event){
        console.log(JSON.stringify(event.detail.value));
        console.log(JSON.stringify(this.wiredContact));
        this.wiredContact.Name = event.detail.value;
    }

}

Apex:

public class ContactController {

    @AuraEnabled(cacheable=true)
    public static Contact fetchContact(){
        return [SELECT Id,Name FROM COntact LIMIT  1];
    }
}

On top of my head, am not doing anything wrong, anyone has idea what's wrong with my code?

When I print console.log(JSON.stringify(this.wiredContact)); I get old values so am pretty sure it exists.

I tried with @track and @api, but same response. Can anyone shed some light?

Answer 1

Cached items are set as read-only (because otherwise you could corrupt the cache). If you want a modifiable object, you need to clone it.

this.wiredContact = Object.assign({}, data);

Based on comments, you can also use the rest parameter syntax in LWC:

this.wiredContact = {...data};

If you don't care about some mobile browsers, and you're using Lightning Web Security instead of Locker Service, you can also use the structuredClone function, which can handle even recursive structures and other things that the JSON.parse(JSON.stringify(value)) trick doesn't support. You can check the status of structuredClone on Can I Use.

Answer 2

This is what I could find from the documentation for wired service and that seems to be the case here (emphasis mine).

The wire service provisions an immutable stream of data to the component

So it most likely seems that when trying to set the values directly using this.wiredContact.Name, because of it's read only property, the values are not getting set.

However if you try to create a new data and then assign it to this.wiredContact, it works:

this.wiredContact = "{Name:" + event.detail.value + "}";

Answer 3

For nested Objects I use two recursive functions :

const setNestedKey = (obj, path, value) => {

    if (path.length === 1) {
        obj = {...obj, [path] : value}
        return obj
    }
        return setNestedKey(obj[path[0]], path.slice(1), value)
    }

const assignObject = (obj, path, value) => {

    let newObj = setNestedKey(obj, path, value);
    if (path.length === 1) {
        return newObj;
    } 
    path.pop();
    return assignObject(obj, path, newObj);

}

Answer 4

Cached items read only, you need to create a new deep copy of the json object

this.wiredContact = JSON.parse(JSON.stringify(data));

Answer 5

Another way to avoid getting this error is by updating the way you call your Apex method. So instead of using the @wire decorator, you can just explicitly call your Apex method within the connectedCallback() lifecycle hook and removing the (cacheable=true) annotation from your Apex controller method. So your updated files would look like this:

JS:

import { LightningElement, wire, track, api } from 'lwc';
import myContact from "@salesforce/apex/ContactController.fetchContact";

export default class Myrefreshapextest extends LightningElement {

     connectedCallback() {
        myContact()
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.log(error);
            })
    }

    //More code...

}

APEX:

public class ContactController {

    @AuraEnabled
    public static Contact fetchContact(){
        return [SELECT Id,Name FROM COntact LIMIT  1];
    }
}

Answer 6

With arrays, you can use the map function and clone the object. An example customizing columns for use in a lightning datatable where data is wired return result.

const contacts = data.map((contact) => ({
    ...contact,
    OwnerName: contact.Owner.Name,
    Industry: contact.Account.Industry
}));
this.contacts = contacts;

Adding to this as I ran into this scenario. I wanted to update the a record in an array without calling refresh apex. This has worked consistently so far. There may be another way more succinct.

updateRecord(recordInput)
.then((result) => {
    // Clone data
    const data = [...this._data];
    this._data = [];
    const index = data.findIndex((row) => row.Id === result.id);
    // Clone row (object)
    const row = {...data[index]};
    // Set some values
    row.Industry = "Banking";
    row.AccountSource = "Partner";
    // Replace row
    data.splice(index, 1, row);
    // Set data
    this._data = data;
    this.dispatchEvent(
        new ShowToastEvent({
            title: "Success",
            message: "Account updated",
            variant: "success"
        })
    );
})
.catch((error) => {
    this.dispatchEvent(
        new ShowToastEvent({
            title: "Error Updating Account",
            message: reduceErrors(error).join(", "),
            variant: "error",
            mode: "sticky"
        })
    );
})