`refreshApex` とは？

LWC における refreshApex の使い方まとめ

LWCで @wire を使って Apex メソッドを呼び出すと、結果はブラウザに キャッシュ されます。 この仕組みにより パフォーマンス向上 や 無駄なサーバーリクエスト削減 が実現できますが、 キャッシュがあるために 更新直後のデータが UI に反映されない 場面もあります。
そのようなときに使うのが refreshApex です

1. refreshApex とは？

• @wire で取得したデータを 再取得（最新化） するための関数
• 内部的には キャッシュをクリア → サーバーに再問い合わせ → キャッシュ更新 を行う
• 更新処理を行った後、最新状態を UI に反映したいときに使う

2. キャッシュと非同期の仕組み

• @AuraEnabled(cacheable=true) を付けた Apex メソッドは、LWC 側で キャッシュ可能
• 2回目以降の呼び出しはキャッシュからすぐに返される（表示が高速化される）
• ただしキャッシュは「過去の取得データ」なので、最新ではない場合がある
• その場合に refreshApex() を呼ぶことで、サーバーに再問い合わせして最新化できる

3. 使い方ステップ

3-1 refreshApexをインポートする:

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

3-2 Apexメソッドを@wireで呼び出す:

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountList extends LightningElement {
    accounts;
    wiredAccountsResult; // refreshApexで使うため保持

    @wire(getAccounts)
    wiredAccounts(result) {
        this.wiredAccountsResult = result; // refreshApex用
        if (result.data) {
            this.accounts = result.data;
        }
    }
}

3-3 refreshApex()を呼び出す:

handleRefresh() {
    refreshApex(this.wiredAccountsResult)
        .then(() => {
            console.log('最新データを取得しました');
        });
}

4. 使用例（更新処理と組み合わせる）

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import updateAccount from '@salesforce/apex/AccountController.updateAccount';
import { refreshApex } from '@salesforce/apex';

export default class AccountList extends LightningElement {
    accounts;
    wiredAccountsResult;

    @wire(getAccounts)
    wiredAccounts(result) {
        this.wiredAccountsResult = result;
        if (result.data) {
            this.accounts = result.data;
        }
    }

    async handleUpdate() {
        // レコード更新（Imperative Apex 呼び出し）
        await updateAccount({ accountId: '001XXXXXXXXXXXX' });

        // 更新後に最新データを取得
        refreshApex(this.wiredAccountsResult);
    }
}

5. 注意点

• refreshApex は wire で取得した結果オブジェクト にしか使えない
• Imperative 呼び出しの戻り値には適用できない
• 頻繁に呼びすぎるとネットワーク負荷が上がるため、必要なときだけ使うこと

5. まとめ

• refreshApex =キャッシュ済みの wire データを最新化する関数
• @AuraEnabled(cacheable=true) と組み合わせて使うのが前提
• キャッシュの利便性 と 最新データの反映 を両立させるために欠かせない仕組み

6. 参考資料