Why am I getting the Uncaught TypeError in LWC?
Question:
I am working with a Lightning Web Component (LWC) and trying to update a field on a Contact record, but I am encountering the following exception:
Uncaught TypeError: ‘set’ on proxy: trap returned falsish for property ‘Name’
Here’s the code I’m working with:
HTML Code:
<template>
<template if:true={wiredContact}>
{wiredContact.Name}
<lightning-input value={wiredContact.Name} onchange={updateName}></lightning-input>
</template>
</template>JavaScript Code:
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 Code:
public class ContactController {
@AuraEnabled(cacheable=true)
public static Contact fetchContact(){
return [SELECT Id, Name FROM Contact LIMIT 1];
}
}I’m not doing anything fancy. Just trying to update a field on the Contact record in my LWC, but I’m getting the above exception. When I print console.log(JSON.stringify(this.wiredContact)), I can see the old values, so I am confident that it exists. I’ve tried using both @track and @api decorators, but nothing works.
Can someone explain what might be causing this error?
Answer:
There are two possible solutions to address the “Uncaught TypeError” you’re encountering. The first involves updating how you handle the reactivity of the @wire decorator, and the second solution suggests explicitly calling the Apex method instead of using @wire. Both approaches prevent the error by avoiding direct modification of the proxy object created by the wire service.
Enroll at CRS Info Solutions, a premier Salesforce online training institute. Book your free demo session now and start your journey to mastering Salesforce!
1. Issue with Reactivity in @wire:
The @wire decorator is reactive, and once the value of wiredContact is set, it becomes a “proxy” object. When you try to update wiredContact.Name directly, the proxy doesn’t allow it because it is read-only by design in LWC. This results in the error you are seeing.
To resolve this issue, instead of directly modifying wiredContact.Name, you can create a new object or use a setter method. Here’s how you can fix it:
Modify the updateName method to create a new object for the update:
updateName(event){
const newContact = { ...this.wiredContact }; // Create a new object
newContact.Name = event.detail.value; // Update the Name field
this.wiredContact = newContact; // Reassign the new object
}Explanation: The updateName method creates a shallow copy of the wiredContact object using the spread operator (...), updates the Name field in the new object, and then reassigns this updated object back to wiredContact to trigger reactivity in the component. This approach avoids modifying the original proxy object directly.
This way, you’re updating the entire object, which avoids issues with modifying the proxy directly.
2. Solution by Using Explicit Apex Calls:
Another way to avoid this issue is by explicitly calling your Apex method rather than using the @wire decorator. This approach also involves removing the cacheable=true annotation in the Apex controller.
Here’s how you can update your code to explicitly call the Apex method:
JavaScript Code:
import { LightningElement } from 'lwc';
import myContact from "@salesforce/apex/ContactController.fetchContact";
export default class Myrefreshapextest extends LightningElement {
connectedCallback() {
myContact()
.then(data => {
console.log(data);
// Store the contact data
this.wiredContact = data;
})
.catch(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;
}
}Explanation: The code defines an LWC component that retrieves a Contact record using an Apex method called fetchContact within the connectedCallback lifecycle hook, and stores the retrieved data in the wiredContact property. The updateName method updates the Name field of the wiredContact object when the user interacts with an input field.
Apex Code:
public class ContactController {
@AuraEnabled
public static Contact fetchContact(){
return [SELECT Id, Name FROM Contact LIMIT 1];
}
}Explanation: The ContactController class defines a public static method fetchContact() annotated with @AuraEnabled, making it accessible from Lightning components. This method queries the first Contact record’s Id and Name and returns the result.
By calling the Apex method directly inside the connectedCallback, you bypass the reactivity and the proxy issues that occur when using @wire.
Summing Up
The error “Uncaught TypeError: ‘set’ on proxy: trap returned falsish for property ‘Name'” occurs because the @wire decorator in LWC creates a reactive proxy object that does not allow direct modification of properties, leading to this issue when attempting to update the Name field. The solution is to either update the object in an immutable way by creating a new object and reassigning it or to switch from using the @wire decorator to explicitly calling the Apex method, removing the cacheable=true annotation, and managing reactivity manually. Both approaches resolve the problem by ensuring that the object’s properties are updated in a way that respects LWC’s reactivity model.
Accelerate Your Salesforce Career in Seattle
Elevate your Salesforce skills with expert-led Salesforce online training in Seattle, tailored for both beginners and professionals. Gain practical experience through real-world projects and master cloud-based CRM solutions with guidance from certified instructors. Unlock exciting career opportunities and become a Salesforce expert with comprehensive, hands-on learning at CRS Info Solutions.
CRS Info Solutions is a leading Salesforce training in Seattle, offering a thorough, real-time project-based curriculum. Our courses cover Salesforce Admin, Developer, Integration, Marketing Cloud, CPQ, and Lightning Web Components (LWC). With expert instructors offering hands-on training, we ensure you’re well-prepared for real-world challenges. Join us now to become a certified Salesforce professional and take the next step in your career.
Enroll today for a free demo at CRS Info Solutions, Seattle!!!
Related Posts:
