Aura 開発者向け　ワイヤーサービスを使用したデータの取得サンプル

2024年9月5日

環境
Salesfoce

概要
Lightning Web コンポーネントでは、Salesforce データを読み取るために、
Lightning データサービス上に構築されたリアクティブなワイヤーサービスを使用します。
コンポーネントは JavaScript クラスの @wire を使用して、
lightning/ui*Api 名前空間のいずれかのワイヤーアダプターからデータを読み取ります。

1.@wire を使用してレコードを取得する

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Property__c.Name';
import PICTURE_FIELD from '@salesforce/schema/Property__c.Picture__c';
export default class PropertySummary extends LightningElement {
    @api recordId;
    propertyName;
    pictureURL;
    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, PICTURE_FIELD] })
    wiredRecord({ error, data }) {
        if (data) {
            this.propertyName = getFieldValue(data, NAME_FIELD);
            this.pictureURL = getFieldValue(data, PICTURE_FIELD);
        } else if (error) {
            // Handle error. Details in error.message.
        }
    }
}

説明
このコードは lightning/uiRecordApi から getRecord ワイヤーアダプターをインポートします。

2.Property カスタムオブジェクトの Name 項目への参照をインポートします。
import NAME_FIELD from '@salesforce/schema/Property__c.Name’;
@api デコレーターは recordId プロパティを公開します。propertySummary を
含む親コンポーネントは、
その HTML ファイルの record-id 属性の値を設定します。