The RefreshApex Method and its implementation in the Lightning Web Component

|
| By Webner

The refreshApex() function is used when we want to refresh the page data in lightning web components. We can update the wire function or parameter data using refreshApex (), and then component values will be rendered. Refresh apex works only when you pass the complete response as the argument.

Syntax to call the refreshApex function –

refreshApex(Argument)

Example to show how to refresh wire function data retrieving the contact list in LWC

  • Create a lightning web component, named refreshContactApex
    refreshContactApex.html
    <template>
    <lightning-card title="Refresh Apex">
    <lightning-button slot="actions" label="Delete Contact" onclick={deleteConRecord} ></lightning-button>
    <lightning-datatable data={contactList} columns={cols} key-field="Id" max-row-selection="1" onrowselection={handelConSelection} >
    </lightning-datatable>
    </lightning-card>
    </template>

    refreshContactApex.js
    import { LightningElement, wire, track } from 'lwc';
    import { deleteRecord } from 'lightning/uiRecordApi';
    import { refreshApex } from '@salesforce/apex';
    import getContacts from '@salesforce/apex/ContactListsController.getContactList;
    const Columns = [
    { label: 'Name', fieldName: 'FirstName', type: 'text' },
    { label: 'Phone', fieldName: 'Phone', type: 'text' },
    { label: 'Email', fieldName: 'Email', type: 'text' }
    ];
    export default class refreshContactApex extends LightningElement {
    cols = Columns;
    @track selectedRecord;
    @track contactList = [];
    @track error;
    @track wiredContactList = [];
    @wire(getContacts) conList(result) {
    this.wiredContactList = result;
    if (result.data) {
    this.contactList = result.data;
    this.error = undefined;
    } else if (result.error) {
    this.error = result.error;
    this.accountList = [];
    }
    }
    handelConSelection(event) {
    if (event.detail.selectedRows.length > 0 ) {
    this.selectedRecord = event.detail.selectedRows[0].Id;
    }
    }
    deleteConRecord() {
    deleteRecord(this.selectedRecord)
    .then(() => {
    refreshApex(this.wiredContactList);
    })
    .catch(error => {
    })
    }
    }

    Using refreshApex() while deleting records so that I can get an updated list of contacts.
    refreshApex(this.wiredContactList);
    The argument passed into the refreshApex() function has a wire function response and on passing this again, the wire function is called and a new response is retrieved.

    ContactListsController.cls
    public with sharing class ContactListsController{
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList(){
    return [select Id, FirstName, LastName,Phone,Email from Contact];
    }
    }

Note: A record will be deleted only if there is no associated data linked to it.
If there is a change on the server-side, the refreshApex() only updates the list and the browser cache; otherwise, nothing is changed.

Leave a Reply

Your email address will not be published. Required fields are marked *