Mastering RefreshApex() in Lightning Web Components / Blogs / Perficient

 In the world of Lightning Web Components, one of the most crucial aspects of building responsive applications is managing data. Salesforce provides us with a powerful utility called refreshApex() that allows us to refresh data in our components with ease. In this blog, we will dive deep into the details of refreshApex() and explore how to utilize its full potential. By the end, you’ll be equipped with the knowledge to effectively use refreshApex in your Lightning Web Components.

                                                                                                                                         

Table of Contents:

Understanding the Basics of refreshApex()

1. What is refreshApex?
2. How does refreshApex work?
3. Benefits of using refreshApex.

Implementing refreshApex() in LWC

1. Importing the necessary modules
2. Initializing the Apex method and its variables
3. Calling refreshApex to update the data
4. Handling errors and displaying error messages

Advanced Techniques with refreshApex

1. Conditional refreshing of data.
2. Refreshing the data on various events like displaying data and deleting data in lightning web components.

Understanding refreshApex() in Lightning Web Components

refreshApex is an extension of the standard Lightning Data Service (LDS) that enables more control and flexibility when fetching data from the server. Additionally, LDS handles caching and data synchronization out of the box. Consequently, with RefreshApex developers can manually refresh the data when required, ensuring improved data accuracy.

Advantages of refreshApex():

1. Improved Data Accuracy: By manually refreshing the data using refreshApex, developers can ensure that the information displayed on the UI is always up-to-****. This is particularly useful in scenarios where data changes frequently. Moreover, it allows developers to provide users with the most recent data without relying solely upon automatic LDS updates.
2. Reduced Server Calls: Instead of reloading the entire page or component, developers can refresh only specific data. Consequently, this helps minimize server calls which are especially beneficial when dealing with large datasets or slow network connections.
3. Customized Control: Developers have the flexibility to trigger the refresh action based on user interactions, events, or specific business logic requirements. This level of control empowers developers to create a more efficient and personalized user experience.

Using refreshApex() in Lightning Web Components

To use refreshApex in your Lightning Web Component, follow these steps:

Step 1:  In your JavaScript code, ensure that you import the utility.

import { refreshApex } from '@salesforce/apex';

Step 2: Create a reference variable to hold the data that requires refreshing.

wiredAccountResult;
@wire(getAccounts) wiredAccounts;

Step 3: Develop a method that can utilize to initiate the data refresh process

refreshData() { 
return refreshApex(this. wiredAccountResult);
}

Step 4: Trigger the refresh action based on user interactions, events, or specific business logic requirements.

 

Implementation of refreshApex() using an Example in LWC

Let’s walk through an example where we want to display the data and refresh the data after deleting a record:

Here’s an example of the HTML code that displays the data in a table format and provides a button to delete each record:

AccountTable.html  in Lightning Web Components:

<template>
    <lightning-card title="Account List" icon-name="standard:account">
        <template if:true={accounts}>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered slds table_striped">
                <thead>
                    <tr class="slds-text-heading_label">
                        <th scope="col">Name</th>
                        <th scope="col">Industry</th>
                        <th scope="col">Phone</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>

                    <template for:each={accounts} for:item="account">
                        <tr key={account.Id}>
                            <td data-label="Name">{account.Name}</td>
                            <td data-label="Industry">{account.Industry}</td>
                            <td data-label="Phone">{account.Phone}</td>
                            <td data-label="Actions">
                                <lightning-button-icon icon-name="utility:delete" variant="border-filled"
                                    alternative-text="Delete"
                                    title="Delete"
                                    onclick={handleDelete}
                                    data-account-id={account.Id}></lightning-button-icon>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>
        <template if:true={error}>
            <!-- Handle error display -->
        </template>
    </lightning-card>
</template>

AccountTable.js in Lightning Web Components:

import { LightningElement, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import deleteAccount from '@salesforce/apex/AccountController.deleteAccount';

export default class AccountTable extends LightningElement {
    accounts;
    error;
    wiredAccountResult;

    @wire(getAccounts)
    wiredAccounts( result ) {
        this. wiredAccountResult=result;
        if (result.data) {
            this.accounts = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.accounts = undefined;
            this.error = result.error;
        }
    }

    handleDelete(event) {
        const accountId= event.target.dataset.accountId;
        deleteAccount({ accountId })
            .then(() => {
                // Perform any success actions if needed
                refreshApex(this. wiredAccountResult);
            })
            .catch((error) => {
                // Handle the error if deletion fails
            });
    }
}

Apex code:

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
    return [SELECT Id, Name, Industry, Phone FROM Account LIMIT 10];
  }
    @AuraEnabled
    public static void deleteAccount(String accountId) {
    Database.delete(accountId);
  }
}

In this example, we have created an Apex method called getAccounts which displays the detail of the Account and deleteAccount method, which accepts an ‘accountId’ as a parameter and deletes the corresponding record from the Table.

In the LWC component, we import the deleteAccount Apex method using the ‘@salesforce/apex/AccountController.deleteAccount’  syntax.

The handleDelete() function invokes the deleteAccount Apex method with the appropriate accountId parameter. Upon successful deletion, the refreshApex function is called, passing in the wiredAccounts property. This ensures the data is refreshed, and the component displays the updated list of accounts.

Conclusion:

‘ refreshApex()’ is a powerful utility in the Lightning Web Components, enabling developers to refresh data in their components effortlessly. By mastering the use of refreshApex, you can ensure that your applications are responsive, up-to-****, and provide a seamless user experience. With the knowledge gained from this blog post, you are well-equipped to leverage the full potential of refreshApex in your Lightning Web Components. Happy coding!