LWC refreshApex: How To Refresh Page Data in Lightning Web Component
salesforcepoint →
Wednesday, 12 August 2020
refreshApex in lwc:
We need to import refreshApex function from salesforce/apex class, so that we can use it.
refreshApex lwc example:
In below example we are displaying latest five account records in lwc data table and we have a radio button to select the record. Once we click on Delete button selected record will be deleted from apex database but not on table. So we use refreshApex() function (refreshApex(this.wiredAccountList)) to fetch latest data from server on delete success in deleteRecord function. We created "wiredAccountList" property to assign result of wire function "accList" and this property used in resfreshApex function.
AccountController.cls
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List getAccountList(){
return [SELECT Id, Name,Phone,Industry FROM Account order by createddate desc LIMIT 5];
}
}
lwcRefreshApex.js
import { LightningElement, wire, track } from 'lwc';
import { deleteRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import getLatestAccounts from '@salesforce/apex/AccountController.getAccountList';
const COLS = [
{ label: 'Name', fieldName: 'Name', type: 'text' },
{ label: 'Stage', fieldName: 'Phone', type: 'text' },
{ label: 'Amount', fieldName: 'Industry', type: 'text' }
];
export default class LwcRefreshApex extends LightningElement {
cols = COLS;
@track selectedRecord;
@track accountList = [];
@track error;
@track wiredAccountList = [];
@wire(getLatestAccounts) accList(result) {
this.wiredAccountList = result;
if (result.data) {
this.accountList = result.data;
this.error = undefined;
} else if (result.error) {
this.error = result.error;
this.accountList = [];
}
}
handelSelection(event) {
if (event.detail.selectedRows.length > 0) {
this.selectedRecord = event.detail.selectedRows[0].Id;
}
}
deleteRecord() {
deleteRecord(this.selectedRecord)
.then(() => {
refreshApex(this.wiredAccountList);
})
.catch(error => {
})
}
}
lwcRefreshApex.html
<template>
<lightning-card title="Latest Five Accounts">
<lightning-button slot="actions" label="Delete Account" onclick={deleteRecord}></lightning-button>
<lightning-datatable
data={accountList} columns={cols} key-field="Id"
max-row-selection="1" onrowselection={handelSelection} >
</lightning-datatable>
</lightning-card>
</template>LWC refreshApex() not working?
Make sure that the input parameter in the refreshApex should be total result of wire function but not only data, i.e in many cases we return { error, data } in wire function and we use data only for refresh apex, in this case refreshApex will not work. We must entire result (check above example where we return result not { error, data } and that is assigned to one dummy variable i.e wiredAccountList and that is used as input parameter for refreshApex().
