Fixing ‘set on proxy’ Error in LWC

When working with Lightning Web Components (LWC), you may run into the following error while trying to update a field on a Contact record fetched via an Apex method

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

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

This typically occurs when you fetch data using a @wire service with an Apex method marked as cacheable=true. In such cases, Salesforce provides the data as a read-only proxy object to ensure the cached version of the record is not corrupted. Attempting to directly modify a field on that proxy object, such as this.wiredContact.Name = event.detail.value, will throw this error.

For example, the following code fails because it tries to mutate a cached object directly:

@wire (myContact)
fetchedContact({ error, data }) {
    if (data) {
        this.wiredContact = data;
    }
}

updateName(event) {
    this.wiredContact.Name = event.detail.value; // ❌ Throws error
}

@wire (myContact)
fetchedContact({ error, data }) {
    if (data) {
        this.wiredContact = data;
    }
}

updateName(event) {
    this.wiredContact.Name = event.detail.value; // ❌ Throws error
}

Explanation: Here, the @wire decorated method provides a cached proxy object. Since Salesforce protects cached objects from mutation, attempting to change Name directly on this.wiredContact causes the proxy trap error

To fix this issue, you need to work with a clone of the object instead of modifying the original cached object. There are multiple ways to do this.

One solution is to use Object.assign to create a shallow copy:

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

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

Explanation: Object.assign({}, data) creates a shallow copy of the original object. Now this.wiredContact is no longer a read-only proxy, and you can update its properties safely.

Another cleaner approach is to use the spread operator:

this.wiredContact = { ...data };

this.wiredContact = { ...data };

Explanation: The spread syntax (...data) copies enumerable properties of the object into a new plain object. This ensures that this.wiredContact becomes mutable while keeping the original cached object intact.

If you are using Lightning Web Security instead of Locker Service, you can also use the modern structuredClone function, which works even with deeply nested or recursive objects:

this.wiredContact = structuredClone(data);

this.wiredContact = structuredClone(data);

Explanation: structuredClone makes a deep copy of the object, handling complex structures like nested arrays or recursive objects. This is more powerful than Object.assign or spread but requires modern browser support.

Alternatively, if you want to avoid this proxy object issue altogether, you can skip using @wire with cacheable=true. Instead, call your Apex method imperatively in the connectedCallback() lifecycle hook, and remove the cacheable=true annotation from your Apex controller. This way, the data you receive is not cached and can be modified directly.

Here is an example of the updated JavaScript:

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

export default class Myrefreshapextest extends LightningElement {
    wiredContact;

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

    updateName(event) {
        this.wiredContact.Name = event.detail.value; // ✅ Safe now
    }
}

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

export default class Myrefreshapextest extends LightningElement {
    wiredContact;

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

    updateName(event) {
        this.wiredContact.Name = event.detail.value; // ✅ Safe now
    }
}

Explanation: Instead of using @wire, we call the Apex method inside connectedCallback. Since the Apex method is not cacheable, Salesforce returns a normal object that we can modify without errors.

And the updated Apex class without cacheable=true:

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

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

Explanation: By removing (cacheable=true), the Apex method no longer returns a cached object. The data is mutable, so fields like Name can be safely updated in the LWC JavaScript code.

In summary, this error happens because @wire with cacheable=true returns a read-only proxy object. To fix it, you can either clone the data before making changes, or switch to imperative Apex calls without caching so the returned data is mutable.

Real-Time Project-Based Salesforce Course to Kick Start Your Career

Our Salesforce Course is designed to provide you with a deep understanding of the Salesforce platform, equipping you with the essential skills to succeed in the CRM field. The program covers important modules such as Salesforce Admin, Developer, and AI, blending theory with hands-on practice. You’ll gain practical experience through real-world projects and assignments, enabling you to solve complex business challenges using Salesforce solutions. Our expert instructors ensure that you gain both technical proficiency and relevant industry knowledge to thrive within the Salesforce ecosystem.

Beyond technical skills, our Salesforce training in Mumbai offers personalized mentorship, exam preparation, and interview coaching to enhance your career prospects. You’ll have access to comprehensive study materials, live project experience, and dedicated support throughout your learning journey. Upon completing the course, you’ll be fully prepared for certification exams and equipped with the problem-solving skills that employers seek. Start your Salesforce journey with us and unlock a world of career opportunities. Enroll for a Free Demo now!