Lightning Web Component

RefreshApex in LWC

On Lightning Web Component, refreshApex() method allows you to refresh the data returned by the server side, such as an Apex Class, without refreshing the entire page.

This process is essential when you need to ensure that the data displayed in your user interfaces is current and up to date.

RefreshApex() in Lightning Web Component

RefreshApex Example

Let's see a quick example of how this refreshApex in a Lightning Web Component works.

Get data from Apex

In this RefreshApex example, we will create an apex class to get the last ten contacts created in Salesforce to display them in a table.

You must define your apex class using @AuraEnabled(cacheable=true) since it will increase the performance and it will make available the refreshApex method in your LWC.

public with sharing class GetAllContacts {

    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
        return [SELECT Id, Firstname, Lastname, Email FROM Contact ORDER BY CreatedDate DESC LIMIT 10]; 
    }
}

Using RefreshApex

On the HTML of your component, define a lightning-datatable to display the data received from the Apex Controller and a button to refresh the table.

<template>
    <lightning-button label="Refresh Contacts" variant="brand" onclick={refreshData}></lightning-button>
    <lightning-datatable
        data={data}
        columns={columns}
        key-field="id"
    ></lightning-datatable>
</template>

Then, on your Javascript, you must import the Apex controller, wire property, and the refreshApex method.

import { LightningElement, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import getContacts from '@salesforce/apex/GetAllContacts.getContacts';

After importing everything, use the wire property to get the data from the Apex controller.

Here is where you need to define a variable that will be refreshed with the latest data from the server. In this case, it will be named tableRefreshed.

data = [];

@wire(getContacts) 
getData(result){
    this.tableRefreshed = result;
    const {data, error} = result;

    if(data) this.data = data;
    if(error) console.log(error);
}

Finally, call the refreshApex() to refresh the variable declared above and get the latest changes from the server.

import { LightningElement, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import getContacts from '@salesforce/apex/GetAllContacts.getContacts';

const COLUMNS = [
    { label: 'FirstName', fieldName: 'FirstName' },
    { label: 'LastName', fieldName: 'LastName' },
    { label: 'Email', fieldName: 'Email' },
];

export default class RefreshApexExample extends LightningElement {
    data = [];
    columns = COLUMNS;

    @wire(getContacts) 
    getData(result){
        this.tableRefreshed = result;
        const {data, error} = result;
    
        if(data) this.data = data;
        if(error) console.log(error);
    }

    refreshData(){
        refreshApex(this.tableRefreshed);
    }
}

This is the refreshApex in action:

refreshApex example in LWC

RefreshApex Key Benefits

Salesforce refreshApex method provides an increase to the performance when you need to refresh the data used on your component.