【Salesforce】Lightning Web Components（LWC）を使用したページ更新を伴わないケースレコードのリフレッシュ

はじめに

Salesforceでの作業中、ページ全体を再読み込みすることなくレコードデータをリフレッシュしたい場面は多々あります。
例えば、Amazon Connectとの連携を考えた場合、通話中にページ全体をリフレッシュしてしまうと、通話が途切れてしまうため、部分的にリフレッシュしたい場面があります

そこで、今回はLightning Web Components（LWC）を使用して、ページ全体を再読み込みせずに対象のレコードのデータをリフレッシュする方法を記載します。
今回はケースオブジェクトを使用した方法の記載とします。

Lightning Web Components

caseDetails.html

<template>
    <lightning-card title="ケース詳細" icon-name="standard:case">
        <div class="slds-m-around_medium">
            <div style="text-align:right;">
                <lightning-button-icon onclick={handleRefresh} icon-name="utility:refresh"></lightning-button-icon>
            </div>
            <lightning-record-form object-api-name="Case" record-id={recordId} layout-type="Full" columns="2" mode="view"></lightning-record-form>
        </div>
    </lightning-card>
</template>

caseDetails.js

import { LightningElement, api } from 'lwc';
import { notifyRecordUpdateAvailable } from 'lightning/uiRecordApi';

export default class CaseDetails extends LightningElement {
    @api recordId;

    handleRefresh() {
        //リフレッシュボタン押下時にLightningデータサービス（LDS）へ変更通知をする
        //通知することにより、関連コンポーネントがリフレッシュされる
        notifyRecordUpdateAvailable([{recordId: this.recordId}]);
    }
}

※ getRecordNotifyChange は現在非推奨のため、 notifyRecordUpdateAvailable を使用する

実際の画面

下記のGIFは、作成したLWC内のボタンでケースレコードのリフレッシュ操作が行われても、Amazon Connectを通じた通話が継続されていることが確認できます。

追記

本記事の続きとして、ケースレコードの更新を検知し、リフレッシュが必要かどうかをコンポーネントに表示する方法を記載した記事を作成しました。