Why Isn’t refreshApex Working in My LWC?
Question
I created a Kanban board following a tutorial. Everything works except one issue: when a user drags and drops a card, it should refresh the Apex method to display the card in the correct column. However, the card stays in the same column even though a success notification appears. When I reload the page, the card appears in the correct column.
In my updateHandler method, I am using return refreshApex(this.retrieveOpportunities);, but it does not seem to work. Here is my code:
import { LightningElement, wire, api } from 'lwc';
import { updateRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import OPPORTUNITY_OBJECT from '@salesforce/schema/Opportunity';
import STAGE_FIELD from '@salesforce/schema/Opportunity.StageName';
import ID_FIELD from '@salesforce/schema/Opportunity.Id';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import propertiesFromMarket from '@salesforce/apex/PicklistHelper.propertiesFromMarketBis';
import OpportunitiesFromMarket from '@salesforce/apex/PicklistHelper.OpportunitiesFromMarket';
export default class DragAndDropLwc extends LightningElement {
records;
pickVals;
recordId;
@api selectedMarket;
@wire(OpportunitiesFromMarket, {MarketId: '$selectedMarket'})
retrieveOpportunities({error, data}){
if(data){
console.log("OppData", data);
this.records = data;
}
if(error){
console.error(error);
}
}
handleItemDrop(event){
let stage = event.detail;
this.updateHandler(stage);
}
updateHandler(stage){
const fields = {};
fields[ID_FIELD.fieldApiName] = this.recordId;
fields[STAGE_FIELD.fieldApiName] = stage;
const recordInput = { fields };
updateRecord(recordInput)
.then(()=>{
console.log("Updated Successfully");
this.showToast();
return refreshApex(this.records);
})
.catch(error=>{
console.error(error);
});
}
showToast(){
this.dispatchEvent(
new ShowToastEvent({
title:'Success',
message:'Stage updated Successfully',
variant:'success'
})
);
}
}Answer
The issue occurs because refreshApex should be called with the wired property, not with this.records. The correct approach is to store the wired result and refresh it using refreshApex.
Boost your Salesforce career with CRS Info Solutions expert-led Salesforce online training, hands-on projects, and free demo sessions for beginners and professionals!!!
Modify your @wire method to store the wired result in a variable:
@wire(OpportunitiesFromMarket, {MarketId: '$selectedMarket'})
retrieveOpportunities(result){
this.wiredOpportunities = result; // Store the result
if (result.data) {
console.log("OppData", result.data);
this.records = result.data;
}
if (result.error) {
console.error(result.error);
}
}Explanation : This code uses the @wire decorator to call the OpportunitiesFromMarket Apex method with selectedMarket as a parameter and stores the response in wiredOpportunities. If result.data is available, it logs and assigns the data to this.records; if there’s an error, it logs the error to the console. Storing result allows refreshApex(this.wiredOpportunities) to later refresh the wired data.
Then, update refreshApex to use this.wiredOpportunities:
updateHandler(stage){
const fields = {};
fields[ID_FIELD.fieldApiName] = this.recordId;
fields[STAGE_FIELD.fieldApiName] = stage;
const recordInput = { fields };
updateRecord(recordInput)
.then(()=>{
console.log("Updated Successfully");
this.showToast();
return refreshApex(this.wiredOpportunities); // Use the wired result, not the records array
})
.catch(error=>{
console.error(error);
});
}Explanation: The updateHandler function updates a record’s stage by creating a recordInput object with the necessary fields and calling updateRecord. Upon successful update, it logs a success message, shows a toast notification, and attempts to refresh the wired Apex result using refreshApex(this.wiredOpportunities). However, refreshApex should be called on the wired property, not a manually assigned array, to properly trigger reactivity.
Alternative Workaround
If refreshApex still does not work as expected, you can force a reactivity trigger by updating a reactive property:
updateHandler(stage){
const fields = {};
fields[ID_FIELD.fieldApiName] = this.recordId;
fields[STAGE_FIELD.fieldApiName] = stage;
const recordInput = { fields };
updateRecord(recordInput)
.then(()=>{
console.log("Updated Successfully");
this.showToast();
this.records = []; // Reset the array to trigger reactivity
return refreshApex(this.wiredOpportunities);
})
.catch(error=>{
console.error(error);
});
}Another Approach
Some developers use a cache-busting technique by introducing a random number into the parameters:
this._cacheBust = Math.random();
refreshApex(this.wiredOpportunities);This forces LWC to treat the data as new, triggering a fresh Apex call. However, it slightly defeats the purpose of a wired method.
Kickstart Your Salesforce Career with Expert Training in Delhi
Elevate your career with top-notch Salesforce training in Delhi at CRS Info Solutions. Our comprehensive courses are designed to help you succeed in the rapidly expanding Salesforce ecosystem, providing hands-on training with real-world project experience. Whether you’re aiming to become a skilled Salesforce Admin, Developer, or dive into the latest AI-driven modules, we’ve got you covered under the guidance of industry professionals.
Our Salesforce training programs cater to both beginners and experienced professionals seeking to enhance their expertise. We offer personalized learning, detailed course materials, and thorough support for certification preparation and job interviews, ensuring you’re fully equipped for success in the Salesforce industry.
Start your journey with a free demo session today and take the first step toward a fulfilling Salesforce career!!!
Related Posts:
CPQ: Refresh Quote Prices as triggering action
String interpolation in LWC
