Apexでのレコード更新を Lightning Web Component に反映する

Lightning Web Component から Apex メソッドを呼び出してレコード更新する、というコンポーネントを作成した際、更新結果が画面に反映されないという事態に直面しました。

その解決法を残しておきます。

失敗例
改善後

失敗例

取引先名を更新するコンポーネントを作成します。
更新処理は Apex メソッドを呼び出して行います。

<template>
    <lightning-quick-action-panel>
        <div class="slds-align_absolute-center">
            <div class="slds-text-heading_medium slds-p-around_medium">
                <p>取引先名を「東パンダ株式会社」に変えても良いですか？</p>
            </div>
        </div>
        <div slot="footer">
            <lightning-button variant="brand" label="はい" class="slds-m-left_x-small" onclick={handleUpdate}></lightning-button>
        </div>
    </lightning-quick-action-panel>
</template>

import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import updateAcc from '@salesforce/apex/UpdateAccount.updateAcc';

export default class Sample extends NavigationMixin(LightningElement) {
    @api recordId;

    handleUpdate(){
        updateAcc({accId: this.recordId})
        .then(() => {
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: this.recordId,
                    actionName: 'view'
                }
            }, true);
        })
    }
}

public with sharing class UpdateAccount {
    @AuraEnabled
    public static void updateAcc(Id accId){
        try {
            Account acc = [SELECT Id FROM Account WHERE Id = :accId];
            acc.Name = '東パンダ株式会社';
            update acc;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

取引先レコードページからこのコンポーネントを開き更新を実行すると、取引先レコードページに自動でリダイレクトします。
しかし、画面上は取引先名が更新されていません。

これはレコードの更新に失敗しているのではなく、データベースの変更が画面に反映されていないだけです。
データベースの変更を LWC に通知してあげる必要があります。

改善後

notifyRecordUpdateAvailable() を使用して、レコードの変更を通知してあげます。

import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { notifyRecordUpdateAvailable } from 'lightning/uiRecordApi';
import updateAcc from '@salesforce/apex/UpdateAccount.updateAcc';

export default class Sample extends NavigationMixin(LightningElement) {
    @api recordId;

    handleUpdate(){
        updateAcc({accId: this.recordId})
        .then(() => {
            // レコードの変更をデータサービスに通知してからレコードページに戻ることで、ページ上も値が更新される
            notifyRecordUpdateAvailable([{recordId: this.recordId}])
            .then(() => {
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: this.recordId,
                        actionName: 'view'
                    }
                }, true);
            });
        })
    }
}

レコードの変更が画面に反映されるようになりました。