Easy guide on using refreshApex in LWC

When working with Lightning Web Components, one of the most widely used feature is the @wire adapter. Its one of the most powerful ways to retrieve data without writing any apex code. It makes use of cache to improve the overall response time of the application. Though utilization of cache makes application fast, there are instances where your LWC component might be showing stale/old data. This article will walk you through the steps of using refreshApex in LWC, to update the cache with latest changes in salesforce records.

Table of Contents:

1. Understanding the Power of RefreshApex
2. How to use refreshApex in lwc
3. LWC refreshApex Example
4. Resolve: refreshApex not working ?
5. Conclusion

Understanding Cache & RefreshApex

In web development, a cache is a temporary storage area where frequently accessed data is stored. This allows for quicker data retrieval without needing to fetch the same information repeatedly from the server.

The lightning framework in Salesforce, refreshes the cache automatically with the latest data. The exact time interval of refresh is not known.

RefreshApex in LWC is a method provided by the lightning framework, that enables developers to request the lightning framework to refresh the cache.

How to use refreshApex in lwc

In our previous example where we rendered the list of Contact of an Account, we just need to make a minor change to implement RefreshApex in Salesforce.

JS Code

import { LightningElement,wire,track,api} from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';

import getRelatedContactRec from '@salesforce/apex/ContactHandler.fetchContactAccountRecords';

export default class Crudexample extends LightningElement {
	@api recordId;
 
	//Wire adapter to fetch the list of contact records of a related Account.
	@wire(getRelatedContactRec,{ accountId: '$recordId'}) 
	contactRec(response) {
			if (response.data) {
				this.contactRecordsResponse = response;
				this.contactRecords = response.data;
			} else if (response.error){
				console.log('error : ',error);
			}
	}

        getLatestRecords(){
		refreshApex(this.contactRecordsResponse);
	}
}

Explanation

We first imported the refreshApex module

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

After importing the module, we assign the response received from the @wire call.

 @wire(getRelatedContactRec,{ accountId: '$recordId'}) 
    contactRec(response) {
            if (response.data) {
                this.contactRecordsResponse = response;
                this.contactRecords = response.data;
            } else if (response.error){
                //handle error login here
            }
    }

Next, we call the refreshApex on the variable which contains the response received from the wire call.

getLatestRecords(){
	refreshApex(this.contactRecordsResponse);
}

The call to refreshApex requests the lightning framework to reload the cache with latest data referehced in this.contactRecordsResponse.

For Example: If contactRecordsResponse contains contact records, refreshApex will ask the framework to reload the cache with contact records again. If there are any new contact record created after @wire(getRelatedContactRec… was called and before auto refresh of the cache by the framework, those will be updated in the cache.

Note: Call refreshApex only when its necessary, as it incurs a trip to the server

Read the official LWC refreshApex documentation by Salesforce here.

LWC refreshApex Example

Demo

Resolve: refreshApex not working ?

If you are using refreshApex for the first time, chances are you are struggling to get it right. Make sure to take care of the below steps:

You have imported refreshApex correctly without spelling mistake.

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

You are using the complete response from @wire instead of response.data.

@wire(getRelatedContactRec,{ accountId: '$recordId'}) 
    contactRec(response) {
            if (response.data) {
                this.contactRecordsResponse = response;      //This is correct
                this.contactRecordsResponse = response.data; //This is wrong
                this.contactRecords = response.data;
            } else if (response.error){
                //handle error login here
            }
  }

Conclusion

RefreshApex is a very useful feature to manually refresh cache and load the latest data from Salesforce database. By selectively refreshing data without requiring a full page reload, you can provide users with a smoother and more responsive experience in your Salesforce applications.

By going through this article, you should now be able to easily use refreshApex in you LWC component as well as resolve any issues if you are implement it for the first time.

Feel free to copy paste the above code and play around in your developer org. Don’t forget to subscribe to our newsletter for more Salesforce development tips.

If you have any issues or suggestions, please feel free to use the comment section below.