Salesforce Wire Service でApexメソッドを使用する方法

2024年6月30日

環境
Salesforce Apex

概要
ワイヤーサービスを利用して、Apexメソッドから返されたデータをプロパティ、またはメソッドに割り当てます。
Apexメソッドから返されるデータはdataとerrorのプロパティをもつオブジェクトです。

特徴
Apexを使用する
データの参照のみ可能。DML不可。
明示的にメソッドを呼び出す処理をJSに記述しなくてもデータが取得される。

Wireサービスで使用するApexには下記が必要です。
static
publicまたはglobal
@AuraEnabled(cacheable=true)
サポートされる引数、戻り値は下記になります。
引数をApexメソッドに渡すには、キー(Apexメソッドの仮引数とおなじもの)と値のペアのオブジェクトが必要です。

プリミティブ型: Boolean, Date, DateTime, Decimal, Double, Integer, Long, String.
SObject型: 標準オブジェクト、カスタムオブジェクト
Apexクラス（引数に使用する場合、publicなコンストラクタが必要)
コレクション

1.apexコントローラコード

public with sharing class LwcTestCtrl {
    @AuraEnabled(cacheable=true)
    public static List<OrderItem> getTableData(Id orderId) {
        return [
            SELECT
                Id,
                ProductName__c, // 商品名
                TotalPrice,     // 合計金額
                SortOrder__c    // 表示順
            FROM
                OrderItem
            WHERE
                OrderId = :orderId
        ];
    }
}

2.javascriptを作成コード
作成したApexメソッドとwireデコレータをJSファイルにインポートします。
記述はimport apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod’;の
ようになり、Namespaceがcの場合は不要です。

import { LightningElement, api, wire, track } from 'lwc';
import getTableData from '@salesforce/apex/LwcSampleCtrl.getTableData';

プロパティにはオブジェクトが代入されます。Apexの戻り値は代入されたオブジェクトのdataプロパティに
設定されます。読込中は空のオブジェクトが代入されます。

3.プロパティに接続

export default class ConfirmSuccessFee extends LightningElement {
    @api recordId;

    @wire(getTableData, { orderId: '$recordId' })
    tableData;
}

4.Apexメソッドをメソッドに接続する

export default class ConfirmSuccessFee extends LightningElement {
    @api recordId;
    @track data;
    @wire(getTableData, { orderId: '$recordId'})
    getTableData({ error, data }) {
        if (data) {
            this.data = data;
        }
    }
}

5.htmlの作成 Apexメソッドから渡された戻り値はdataプロパティの中に格納されます。
Apexメソッドから渡された戻り値はdataプロパティの中に格納されます。

 <template if:true={tableData.data}>
    <lightning-datatable
        key-field="Id"
        data={tableData.data}
        columns={columns}>
    </lightning-datatable>
</template>

読込中は画面に表示させたくない場合は、if:true=を使用します。
<template if:true={value.data}></template>
<template if:true={canDisp}></template>

<!--
戻り値がBooleanの場合、javascriptで下記を定義
get canDisp() { return this.value.data !== undefined; }
-->