getRecordNotifyChange lwc - refresh UI explicitly

Hello Trailblazers! In this post, we will discuss when should we use getRecordNotifyChange instead of refreshApex, let's understand with an example. This method is used to notify the change in records' data to the Lightning Data Service(LDS) if it is changed by the imperative apex call from LWC or from the VisualForce page. So LDS can update the other components and standard UI with the latest data.

Check out new RefreshEvent API: Use RefreshEvent in LWC to automatically refresh record pages

The getRecordNotifyChange use cases.

• The record is updated from outside of the Lightning Data Service Mechanism. For example, the record is updated via imperative apex call.
• You want to notify multiple components about the record change, and you can't use refreshApex.

Example

Let's see the first example with code, suppose we want to update the account's Type field to the value Customer using an action button based on some conditions and assume that we must use apex to update the record. 

For the sake of example, I have simply updated the field from the apex code. We will use the LWC headless action to call the apex method here. 

Problem

But the problem is that when the account record is updated from the Action button, it's updated at the backend but does not reflect the same on the standard details tab and other custom components.

Solution

The solution is to notify Lightning data service that the record stored in the cache is stale and there is an update to that. And, there we use the getRecordNotifyChange method.

Code

This is an oversimplified example for better understanding. When the record is updated using imperative apex or from outside of the LDS mechanism, we call getRecordNotifyChange to notify LDS.

updateTypeAction.js

import { LightningElement, api } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { getRecordNotifyChange } from "lightning/uiRecordApi";
import updateAsCustomer from "@salesforce/apex/UpdateTypeActionController.updateAsCustomer";
export default class UpdateTypeAction extends LightningElement {
    @api
    recordId;

    @api
    objectApiName;

    @api
    async invoke() {
        await updateAsCustomer({
            accountId: this.recordId
        });
        this.dispatchEvent(
            new ShowToastEvent({
                title: "Success",
                message: 'Account type updated to "Customer"',
                variant: "success"
            })
        );
        getRecordNotifyChange([{ recordId: this.recordId }]);
    }
}

So in the component controller, we have called the getRecordNotifyChange method after the record update, so the UI gets refreshed.

If you remove that line and call the action you will see that the record is updated at the backend but UI is still showing an old value.

updateTypeAction.js-meta.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Update account type action</masterLabel>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">

            <actionType>Action</actionType>
            <objects>
	        <object>Account</object>
	    </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

UpdateTypeActionController.cls

public with sharing class UpdateTypeActionController {
    @AuraEnabled
    public static void updateAsCustomer(Id accountId){
        update new Account(Id=accountId, Type='Customer');
    }
}

Hope you have learned something with the help of this post. If you have any other examples in your mind or facing some problem, please comment below. Thanks

Peace!