【LWC】refreshApexで画面の更新

#保存ボタン押下後に画面を更新する
LWCではレコードの更新時にlightning-record-edit-formを使えば画面を再描画してくれますがlightning-inputやlightning-datatableを使ってレコードを更新したときは画面は再描画がされません。強制的に画面をリロードさせたり、手動でリロードるのはUI的に良くないです。
調べたところLWCには標準でrefrshApex()という@wireを介してプロビジョニングされたApexデータを更新できます。

#refreshApexのインポート
他の標準で用意されている関数と同様にインポートします。

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

#レコードのupdate後にrefreshApexでキャッシュを更新

import { LightningElement, wire, api } from 'lwc';
import getHotAccount from '@salesforce/apex/AccountTableViewController.getHotAccount';
import updateAccount from '@salesforce/apex/AccountTableViewController.updateAccount';
import { refreshApex } from '@salesforce/apex';

export default class RefreshData extends LightningElement {
  @api recordId;
  rate = 'Hot';

  @wire(getHotAccount, { rate: '$rate'})
  wiredAccount;

  handleClick(event) {
    updateAccount({
        rate: 'Hot'
    })
    .then(() => {
      console.log('success');
      return refreshApex(this.wiredAccount);

    })
    .catch((error) => {
        this.message = 'Error received: code' + error.errorCode + ', ' +
            'message ' + error.body.message;
    });
}
}

今回はRatingが'Hot'の取引先の種別を'Prospect'にします。updateAccountのあとにrefreshApex(this.wiredAccount)でキャッシュを更新します。
ボタンを押すとレコードが更新され、画面の表示も'Proapect'に変更されます。

参考までにHTMLファイルも載せておきます。

<template>
  <lightning-card>
  <template if:true={wiredAccount.data}>
      <template for:each={wiredAccount.data} for:item="acc" for:index="idx">
          <div key={acc.Id} class="slds-m-bottom_medium">
              <p>{idx}. {acc.Name}</p>
              <p><lightning-formatted-text value={acc.Name}></lightning-formatted-text></p>
              <p>種別：<lightning-formatted-text value={acc.Type}></lightning-formatted-text></p>
              <p><lightning-badge label={acc.Rating}></lightning-badge></p>
          </div>
      </template>
      <lightning-button label="Mark all as Prospect" onclick={handleClick}></lightning-button>
  </template>
</lightning-card>
</template>

#注意点
refreshApexは@wireで取得したデータでのみ使用できるので、例えばconnectedCallback内でApexを呼び出して取得したレコードの更新を再描画するには工夫が必要になるようです。また機会があればそちらも調べてみたいと思います。