RefreshApex() in LWC

In Salesforce Lightning Web Components (LWC), refreshApex() is a powerful utility that allows you to refresh data retrieved from an Apex method. This is particularly useful when you want to ensure that your component displays the most up-to-date data after performing an operation like a record update, insert, or delete. In this blog, we’ll explore what refreshApex() is, how it works, and how to use it effectively with detailed examples.

What is refreshApex()?

refreshApex() is a function provided by the @salesforce/apex module in LWC. It re-executes the wire adapter or imperative Apex call that fetches data, ensuring that your component reflects the latest data from the server. This is especially useful when:

• A record is updated, inserted, or deleted.
• You want to refresh the UI without reloading the entire page.
• You need to ensure data consistency after a DML operation.

How Does refreshApex() Work?

When you call refreshApex(), it re-runs the wire adapter or imperative Apex call that was used to fetch the data. It uses the same parameters and logic as the original call, ensuring that the refreshed data is consistent with the initial query.

Key Points to Remember:

• Works with Wire Adapters and Imperative Apex: You can use refreshApex() with both @wire and imperative Apex calls.
• Requires a Proxy Object: You must pass the result object (returned by the wire adapter or imperative call) to refreshApex().
• No Manual Data Binding: refreshApex() automatically updates the data in your component, so you don’t need to manually reassign variables.

When to Use refreshApex()

Here are some common scenarios where refreshApex() is useful:

• After a Record Update: Refresh the data after updating a record to reflect the changes in the UI.
• After a Record Insert: Refresh the data after inserting a new record to display it in the list.
• After a Record Delete: Refresh the data after deleting a record to remove it from the UI.
• After a Manual Refresh: Allow users to manually refresh the data by clicking a button.

How to Use refreshApex()

Step 1: Import refreshApex

To use refreshApex(), you need to import it from the @salesforce/apex module.

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

Step 2: Fetch Data Using Wire Adapter or Imperative Apex

You can fetch data using either a wire adapter or an imperative Apex call. The result of this call will be passed to refreshApex().

Example 1: Using Wire Adapter

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

export default class AccountList extends LightningElement {
accounts;
wiredAccountsResult;

@wire(getAccounts)
wiredAccounts(result) {
this.wiredAccountsResult = result; // Store the result for refreshApex()
if (result.data) {
this.accounts = result.data;
} else if (result.error) {
console.error('Error fetching accounts:', result.error);
}
}
}

Example 2: Using Imperative Apex

import { LightningElement } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountList extends LightningElement {
accounts;
accountsResult;

connectedCallback() {
this.fetchAccounts();
}

fetchAccounts() {
getAccounts()
.then(result => {
this.accountsResult = result; // Store the result for refreshApex()
this.accounts = result;
})
.catch(error => {
console.error('Error fetching accounts:', error);
});
}
}

Step 3: Call refreshApex() to Refresh Data

After performing an operation (e.g., updating a record), call refreshApex() to refresh the data.

Example: Refreshing Data After Updating a Record

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

export default class AccountList extends LightningElement {
accounts;
wiredAccountsResult;

@wire(getAccounts)
wiredAccounts(result) {
this.wiredAccountsResult = result;
if (result.data) {
this.accounts = result.data;
} else if (result.error) {
console.error('Error fetching accounts:', result.error);
}
}

handleUpdate(event) {
const accountId = event.target.dataset.id;
const updatedName = 'Updated Account Name';

updateAccount({ accountId: accountId, name: updatedName })
.then(() => {
// Refresh the data after updating the record
return refreshApex(this.wiredAccountsResult);
})
.then(() => {
console.log('Data refreshed successfully');
})
.catch(error => {
console.error('Error updating account:', error);
});
}
}

[\code]

 
<h4>Are you preparing for the Salesforce AI Certifications? Check out the Salesforce certification practice set <a href="https://academy.cloudpadhle.com/s/store">here</a></h4>
<h4>Detailed Examples</h4>
Example 1: Refreshing Data After Deleting a Record

In this example, we’ll delete a record and refresh the data to remove it from the UI.

[code]

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

export default class ContactList extends LightningElement {
contacts;
wiredContactsResult;

@wire(getContacts)
wiredContacts(result) {
this.wiredContactsResult = result;
if (result.data) {
this.contacts = result.data;
} else if (result.error) {
console.error('Error fetching contacts:', result.error);
}
}

handleDelete(event) {
const contactId = event.target.dataset.id;

deleteContact({ contactId: contactId })
.then(() => {
// Refresh the data after deleting the record
return refreshApex(this.wiredContactsResult);
})
.then(() => {
console.log('Data refreshed successfully');
})
.catch(error => {
console.error('Error deleting contact:', error);
});
}
}

Example 2: Manual Refresh with a Button

In this example, we’ll add a button to manually refresh the data.

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

export default class OpportunityList extends LightningElement {
opportunities;
wiredOpportunitiesResult;

@wire(getOpportunities)
wiredOpportunities(result) {
this.wiredOpportunitiesResult = result;
if (result.data) {
this.opportunities = result.data;
} else if (result.error) {
console.error('Error fetching opportunities:', result.error);
}
}

handleRefresh() {
refreshApex(this.wiredOpportunitiesResult)
.then(() => {
console.log('Data refreshed successfully');
})
.catch(error => {
console.error('Error refreshing data:', error);
});
}
}

Best Practices for Using refreshApex()

• Store the Result Object: Always store the result of the wire adapter or imperative Apex call in a variable to pass it to refreshApex().
• Handle Errors Gracefully: Use .catch() to handle errors when refreshing data.
• Avoid Overusing: Use refreshApex() only when necessary to avoid unnecessary server calls.
• Combine with Toast Messages: Notify users when data is refreshed using Lightning Toast messages.

Also Read – Types Of Exceptions in Salesforce

FAQs

1. What happens if refreshApex() is called multiple times in quick succession?

If refreshApex() is called multiple times in quick succession, it will re-execute the Apex call each time. This can lead to performance issues, especially if the Apex method is resource-intensive or if the server is under heavy load.

2. Can refreshApex() be used with paginated data or large result sets?

Yes, refreshApex() can be used with paginated data or large result sets. However, you need to ensure that the same parameters (e.g., offset, limit) are passed to the Apex method during the refresh. Otherwise, the refreshed data may not match the original query.

3. What happens if you call refreshApex() on a wire adapter that hasn’t finished loading? 

If you call refreshApex() on a wire adapter that hasn’t finished loading, it will re-execute the wire adapter as soon as it completes the initial call. However, this can lead to unexpected behaviour, such as duplicate calls or race conditions.

4. Can refreshApex() be used with Apex methods that use @AuraEnabled(cacheable=false)?

Yes, refreshApex() can be used with Apex methods that use @AuraEnabled(cacheable=false). However, since these methods are not cached, refreshApex() will always make a fresh server call.

Conclusion

refreshApex() is very powerful in LWC to ensure that your component always displays the most up-to-date data. Whether you’re updating, inserting, or deleting records, or simply allowing users to manually refresh the data, refreshApex() makes it easy to keep your UI in sync with your database.

With the examples and best practices outlined in this blog, you can effectively use refreshApex() to build dynamic and responsive Lightning Web Components.

Get a complete Roadmap To Learn Salesforce Admin And Development

Name *

First

Last

Email *

Comment or Message

Submit