LWC Apexを使用したデータ操作

Lightning Web コンポーネントでの Apex使用検討例

• レコードデータが 1 件のトランザクションをカスタマイズする場合
• 1 つのトランザクションで複数レコードの操作を実行する場合
• lightning-datatableを使用して、無限スクロール、インライン編集、ヘッダーおよび行レベルのアクション、サイズ変更などの機能を持つデータのテーブルを作成する場合

LWCでのApex使用方法

• Lightning Web コンポーネントで使用される Apex メソッドは static、public、global のいずれか
• メソッド定義の直前に @AuraEnabled アノテーションが付加されている必要がある
• @AuraEnabled アノテーションにcacheable = true と設定すると、キャッシュ可能なメソッドとなる
• @AuraEnabled メソッドがキャッシュ可能の場合、データ操作言語 (DML) による操作は許可されない
• メソッドがキャッシュ可能の場合、キャッシュが更新されるまで新しく追加または変更されたレコードのバージョンが返されない
  • 手動でキャッシュを更新した場合は、 refreshApexを使用する. リンク

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getRelatedContacts(Id accountId) {
        return [
            SELECT Name, Title, Email, Phone
            FROM Contact
            WHERE AccountId = :accountId
            WITH SECURITY_ENFORCED
       ];
    }
}

LWC からの Apex メソッドコール

2つの方法でLWCからApexメソッドをCall可能
- メソッドを結び付ける
- 命令的にメソッドをコール

@wire を使用した Apex コール

• Apex メソッドを結び付けるには、メソッドを cacheable に定義し、@wire デコレータを使用する
• LDSは、Apex メソッドによってキャッシュされたデータを認識しない。
• LDS 関数がレコードを更新すると、その更新は Apex メソッドによってキャッシュされたデータに影響を与えない。

import { LightningElement, api, wire } from 'lwc';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class WireApexProperty extends LightningElement {
    @api recordId;
    @wire(getRelatedContacts, { accountId: '$recordId' })
    contacts;
}

命令的な Apex コール

• 参照操作の呼び出しを制御する必要がある場合とレコードを変更する場合、こちらを使用
• JavaScriptからApexを呼び出すと、promiseが返却される

import { LightningElement, api, wire } from 'lwc';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class CallApexImperative extends LightningElement {
    @api recordId;
    handleButtonClick() {
        getRelatedContacts({ //imperative Apex call
            accountId: this.recordId
        })
            .then(contacts => {
                //code to execute if related contacts are returned successfully
            })
            .catch(error => {
                //code to execute if related contacts are not returned successfully
            });
    }
}