RefreshView API

From the Spring’23 release, we can use RefreshView API in LWC components, to refresh data in standard and custom components.

Are you working on Detail or Related List components in a Lightning Record Page? Or perhaps you're developing a custom component? The RefreshView API can now be your go-to tool to ensure your data remains up-to-date.

For example, after creating child record in Apex, you can dispatch RefreshEvent and the related list will refresh and show newly created record without page reload!

If you want to refresh your custom component, register refresh handler, that will be invoked any time RefreshEvent will be dispatched and reach the component. This way we can achieve refresh capabilities in consistent way of how Salesforce refresh standard components.

import { LightningElement } from "lwc";
import { registerRefreshHandler, unregisterRefreshHandler } from "lightning/refresh";

export default class RefreshHandler extends LightningElement {
    refreshHandlerId;

    connectedCallback() {
        this.refreshHandlerId = registerRefreshHandler(this, this.refreshHandler);
    }

    disconnectedCallback() {
        unregisterRefreshHandler(this.refreshHandlerId);
    }

    refreshHandler() {
    }
}

This example works for orgs with Lightning Web Security enabled. For Lightning Locker follow the documentation.

On the other hand, if your main concern is to update data in standard components on the Lightning Page, or in any other standard component (e.g. lightning-record-form), you can just dispatch the RefreshEvent.

import { LightningElement } from "lwc";
import { RefreshEvent } from "lightning/refresh";

export default class RefreshButton extends LightningElement {
    beginRefresh() {
        this.dispatchEvent(new RefreshEvent());
    }
}

How typical refresh works?

1. RefreshEvent is dispatched on other event or button click 2. The nearest level container component, which is registered with the RefreshView API, receives the RefreshEvent, stopping its propagation. 3. The components’ refresh handlers initiate the refresh process on the appropriate components. They can display spinners, perform instrumentation, and do other things to prepare the UI to be refreshed. 4. Descendant components of the handler participate in the refresh process through exposed API hooks. They can fetch data from a Salesforce org or perform other tasks to synchronize displayed data with the external data source. 5. The refresh for the component hierarchy completes when all data is synchronized and updated onscreen.

Considerations

Custom component must initiate the actual data refresh. For example, call refreshApex() to refresh Apex data provisioned via the wire service. Or call refreshGraphQL() to update the data provisioned by the GraphQL wire adapter.

If the record is updated via a server action such as an Apex call, call notifyRecordUpdateAvailable to update the @wire. These calls are done outside the context of RefreshView API.

RefreshView API can work in orgs that have enabled Lightning Web Security or Lightning Locker. The protocol for registering containers and handlers is different for each security architecture.

The base Lightning Aura components currently don’t support RefreshView API but force:refreshView can be used there.