LWCからデータベースにアクセスする方法
概要
- LDS(Lightning Data Service)を使用する方法
- Wire Service でApexメソッドを使用する方法
- 命令的にApexメソッドを使用する方法
1. LDSを使用する方法
特徴
- Apexを使用しない
- レコードの操作は1件ごと
- 取得するレコードはIDで指定する
① レコードの取得
まず、JSファイルにgetRecordワイヤーアダプタをインポートします。また、wireデコレータもインポートします。
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
取得する項目を定義します。
const FIELDS = ['Contact.Name', 'Contact.Phone'];
または
import CONTACT_NAME_FIELD from '@salesforce/schema/Contact.Name';
import CONTACT_PHONE_FIELD from '@salesforce/schema/Contact.Phone';
const FIELDS = [CONTACT_NAME_FIELD, CONTACT_PHONE_FIELD];
プロパティにwireデコレータを使用して、データベースから取得したレコードの情報が格納されるようにします(メソッドに接続させることも可能です)。
取得する項目はページレイアウトで設定することも可能です(参考)。
項目の値にアクセスする場合、contact.data.fields.Name.valueのようになります。
また、getFieldValue(contact.data, CONTACT_NAME_FIELD)で取得することも可能です。
export default class WireGetRecordDynamicContact extends LightningElement {
@api recordId;
@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
contact;
get name() {
return this.contact.data.fields.Name.value;
}
get phone() {
return this.contact.data.fields.Phone.value;
}
}
データが取得できていなくても画面はレンダリングされます。
if:true={contact.data}を使用することで取得するまで表示させないようにできます。
<template>
<lightning-card icon-name="standard:contact">
<template if:true={contact.data}>
<p>★取得データ</p>
<p>{name}</p>
<p><lightning-formatted-phone value={phone}></lightning-formatted-phone></p>
</template>
</lightning-card>
</template>
② レコードの更新
updateRecordをインポートします。
import { updateRecord } from 'lightning/uiRecordApi';
updateRecordはプロミスを返却します。
また、一件ずつしか処理できません。複数件を処理する場合は繰り返し実行する必要があります。
複数件updateする例は開発者ガイドに記載されています(参考)。
handleSave(event) {
const fields = {};
fields['Id'] = event.detail.draftValues[0].Id;
fields['FirstName'] = event.detail.draftValues[0].FirstName;
fields['LastName'] = event.detail.draftValues[0].LastName;
const recordInput = {fields};
updateRecord(recordInput).then(() => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Contact updated',
variant: 'success'
})
);
}).catch(error => {
// エラー処理
});
}
2. Wire Service でApexメソッドを使用する方法
ワイヤーサービスを利用して、Apexメソッドから返されたデータをプロパティ、またはメソッドに割り当てます。
Apexメソッドから返されるデータはdataとerrorのプロパティをもつオブジェクトです。Apexの戻り値はdataプロパティに格納されています。
（Spring'23からWiredプロパティがデバッグできるようになりました。（リリースノート））
特徴
- Apexを使用する
- データの参照のみ可能。DML不可。
- 明示的にメソッドを呼び出す処理をJSに記述しなくてもデータが取得される。
例
Apexクラスの作成
LWCで呼び出すApexメソッドを作成します。
Wireサービスで使用するApexには下記が必要です。
static-
publicまたはglobal @AuraEnabled(cacheable=true)
サポートされる引数、戻り値は下記になります。
引数をApexメソッドに渡すには、キー(Apexメソッドの仮引数とおなじもの)と値のペアのオブジェクトが必要です。
- プリミティブ型: Boolean, Date, DateTime, Decimal, Double, Integer, Long, String.
- SObject型: 標準オブジェクト、カスタムオブジェクト
- Apexクラス（引数に使用する場合、publicなコンストラクタが必要)
- コレクション
public with sharing class LwcSampleCtrl {
@AuraEnabled(cacheable=true)
public static List<OrderItem> getTableData(Id orderId) {
return [
SELECT
Id,
ProductName__c, // 商品名
TotalPrice, // 合計金額
SortOrder__c // 表示順
FROM
OrderItem
WHERE
OrderId = :orderId
];
}
}
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メソッドをプロパティに接続します。
プロパティにはオブジェクトが代入されます。Apexの戻り値は代入されたオブジェクトのdataプロパティに設定されます。読込中は空のオブジェクトが代入されます。
Apexクラスに引数を渡す必要がある場合、第2引数にオブジェクトで指定します。このとき、引数が一つでも undefined だった場合、Apexメソッドはコールされません。1
export default class ConfirmSuccessFee extends LightningElement {
@api recordId;
@wire(getTableData, { orderId: '$recordId' })
tableData;
}
Apexメソッドをメソッドに接続することも可能です。
export default class ConfirmSuccessFee extends LightningElement {
@api recordId;
@track data;
@wire(getTableData, { orderId: '$recordId'})
getTableData({ error, data }) {
if (data) {
this.data = data;
}
}
}
htmlの作成
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; }
-->
3. 命令的にApexメソッドを使用する方法
この方法ではワイヤーサービスは使用しません。Apexインポートしたメソッドはpromiseを返却します。
特徴
- Apexを使用する
- データの参照だけでなく、DML操作も可能。
例
Apexクラスの作成
LWCで呼び出すApexメソッドを作成します。
static-
publicまたはglobal @AuraEnabled
サポートされる引数、戻り値は下記になります。
- プリミティブ型: Boolean, Date, DateTime, Decimal, Double, Integer, Long, String.
- SObject型: 標準オブジェクト、カスタムオブジェクト
- Apexクラス（引数に使用する場合、publicなコンストラクタが必要)
- コレクション
public without sharing class LwcSampleCtrl {
@AuraEnabled
public static void cancelOrder(Id orderId) {
// 処理
}
}
javascriptの作成
作成したApexメソッドをJSファイルにインポートします。
import cancel from '@salesforce/apex/LwcSampleCtrl.cancelOrder';
インポートされた関数はプロミスを返します。
@api recordId;
doCancel() {
this.showSpinner = true;
cancel({ orderId: this.recordId }).then(result => {
const event = new ShowToastEvent({
"title": "注文のキャンセルを確定しました",
"variant": "success"
});
this.dispatchEvent(event);
}).catch(error => {
this.showErrorToast();
}).finally(() => {
this.showSpinner = false;
});
}
Appendix
現在のユーザの情報を取得する
現在のユーザのIdはインポートで取得可能です。
他の項目を取得する場合、このIDをを使用して上記のいずれかの方法でデータを取得します。
import userId from '@salesforce/user/Id';
参考
-
LDS(Lightning Data Service)を使用する方法
-
Wire Service でApexメソッドを使用する方法
-
命令的にApexメソッドを使用する方法