Lightning Data Service

JavaScriptを使用してコンポーネントをSalesforceデータに接続できる
セキュリティも提供する
- セキュアなUI APIエンドポイントに対してサーバコールを実行するため
パフォーマンスを高められる
- 全てのコンポーネントでクライアント側共有キャッシュを使用する
他コンポーネントがLDSのレコード更新をした際には、他コンポーネントが参照した場合に自動で更新される

レコードフォーム基本コンポーネントを使用したデータ参照または変更

Lightning Web サービスで 1 件のレコードを操作する場合、lightning-record-*-form コンポーネントを使用するのが最も簡単な方法
lightning-record-form
- 宣言的にフォーム項目を設定可能
フォームレイアウトのカスタマイズ、項目値の事前入力、レコードデータの表示方法の変更が必要な場合
- lightning-record-view-form
  - レコードを表示する
- lightning-record-edit-form
  - レコードを編集する

サンプル

recordIdが指定されていないと、editモードで動作し、送信時にレコードを作成する

<template>
    <lightning-card>
        <lightning-record-form
            object-api-name={objectApiName}
            fields={fields}
            onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

ファイルの冒頭で取引先オブジェクトとその項目への参照をインポートしている
- この方法でオブジェクトと項目を参照すると参照整合性が確保される

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class AccountCreator extends LightningElement {
    objectApiName = ACCOUNT_OBJECT;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Account created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

LDS ワイヤアダプタを使用したデータ参照

Salesforce データ (レコード) とメタデータ (レイアウトの詳細、オブジェクトの項目など) を参照可能
ワイヤアダプタを使用するには、プロパティまたは関数を @wire でデコレートし、ワイヤアダプタを指定する

プロパティをワイヤアダプタとしてデコレートする例

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecordProperty extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
}

WireGetRecordPropertyがレコードページに配置されると、@api recordId;にてレコードIDが取得できる
レコードが取得されると、account.dataに保存される。エラーの場合はaccount.errorに保存される
$recordId、として$プレフィックスのある文字列として渡すことで、recordIdの値が変更されれば、キャッシュまたはサーバーから新しいデータを取得する

関数をワイヤアダプタとしてデコレートする例

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecord extends LightningElement {
    @api recordId;
    data;
    error;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    wiredAccount({data, error}) {
        console.log('Execute logic each time a new value is provisioned');
        if (data) {
            this.data = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
}

LDS 関数を使用したデータの変更

LDS ワイヤアダプタはデータの参照に適しているが、レコードの作成、更新、削除には LDS 関数が必要
関数は命令的に呼び出す必要がある
LDS 関数は、レコードが作成、更新、または削除されると LDS キャッシュに通知する
LDS 関数で操作できるのは 1 件のレコードのみ
- 同じコンポーネントで複数の関数を使用できるが (たとえば、同じ操作内で異なる 2 種類のレコードを作成するなど)、各関数は独自の独立したトランザクション上で実行される
- 共通のロールバックロジックがない
結合した DML 操作を行う必要がある場合は、Apexの使用を検討する

import { LightningElement} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LdsCreateRecord extends LightningElement {
    handleButtonClick() {
        const recordInput = {
            apiName: ACCOUNT_OBJECT.objectApiName,
            fields: {
                [ACCOUNT_NAME_FIELD.fieldApiName] : 'ACME'
            }
        };
        createRecord(recordInput)
            .then(account => {
                // code to execute if create operation is successful
            })
            .catch(error => {
                // code to execute if create operation is not successful
            });
    }
}