Lightning でデータ参照/更新/登録

2020.01.03 追記

同様のテーマで以下に内容を書き直しました。
https://qiita.com/idaida_idaida/items/ac6388f7bfad302a033d

概要

LWCでデータの参照/更新/登録のやり方を記載する。

データの表示

※2021.01.02 追記
wireサービスを使って取得したデータは、data.fields.XXX.valueで取得できる。

html

<template>
    <lightning-card>
        <div>
            <p>{phone}</p>
        </div>
        <div>
            <p>{name}</p>
        </div>
    </lightning-card>
</template>

javascript

import { LightningElement, wire, api } from 'lwc';
import { getRecord,getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_PHONE from '@salesforce/schema/Account.Phone';

export default class Basicform extends LightningElement {

    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME, ACCOUNT_PHONE] })
    account;

    get name() {
        return getFieldValue(this.account, ACCOUNT_NAME);
    }

    get phone() {
        return getFieldValue(this.account, ACCOUNT_Phone);
    }

}

データの登録

createRecord APIを使う。

accountCreator.html

<template>
    <lightning-card>
        <div class="slds-m-around_medium">
            <lightning-input label="Name" onchange={handleNameChange} class="slds-m-bottom_x-small"></lightning-input>
            <lightning-button label="Create Account" variant="brand" onclick={createAccount}></lightning-button>
        </div>
    </lightning-card>
</template>

accountCreator.js

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class AccountCreator extends LightningElement {
    
    accountId;
    name = '';

    handleNameChange(event) {
        this.accountId = undefined;
        this.name = event.target.value;
    }
    
    createAccount() {
        const fields = {};
        fields[NAME_FIELD.fieldApiName] = this.name;
        const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
        createRecord(recordInput)
            .then(account => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account created',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
            });
    }
}

データの更新

updateRecord APIを使う。

accountCreator.html

<template>
    <lightning-card title="Test">
        <div class="slds-m-around_medium">
            <lightning-input label="Id" disabled value={recordId}></lightning-input>
            <lightning-input label="Name" value={name} data-field="Name" class="slds-m-bottom_x-small"></lightning-input>
            <lightning-button label="Update Account Name" variant="brand" onclick={updateAccountName}></lightning-button>
        </div>
    </lightning-card>
</template>

update用のJavaScriptAPI(updateRecord)を呼び出す。

accountCreator.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord,updateRecord,getFieldValue } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import ID_FIELD from '@salesforce/schema/Account.Id';

export default class AccountCreator extends LightningElement {
    
    @api recordId;
    name;
    error

    // 第二引数で取得対象のレコードIDと、取得対象のフィールドを指定する。
    // recordIdに$を付けると、値が更新された時に再取得する。
    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
    wiredAccount({ error, data }) {
        if (data) {
            // getFieldValueを使うとdataから値を取得できる
            // this.name = data.fields.Name.value; と同じ意味
            this.name = getFieldValue(data,NAME_FIELD);
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.name = undefined;
        }
    }

    updateAccountName() {

        // フィールド変数を定義
        const fields = {};
        fields[ID_FIELD.fieldApiName] = this.recordId;
        fields[NAME_FIELD.fieldApiName] = this.template.querySelector("[data-field='Name']").value;

        // アップデートAPIを呼び出し
        const recordInput = { fields };
        updateRecord(recordInput)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account updated',
                        variant: 'success'
                    })
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });
   }
}

その他

他のワイヤアダプター（およびJavaScriptAPI）は、以下にあります。
https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.reference_lightning_ui_api_record

参考