Salesforce LWC學習(二十九) getRecordNotifyChange（LDS拓展增強篇）
本篇參考：
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_ui_api
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_guidelines
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_get_record_notify
之前在aura以及lwc得文章中都有過介紹 LDS（Lightning Data Service）。簡而言之， LDS實現了記錄得跨元件共有，並且當前得記錄在跨元件中得版本相同，從而實現不同得元件展示當前記錄同樣得內容。在lwc中，有兩個部分自動實現了LDS。
- lightning-record-form/lightning-record-view-form/lightning-record-edit-form
lightning/ui*Api模組中得所有得wire adapter得方法。
這樣說來很懵，舉個例子更直觀得理解。
RecordNotifyChangeController.cls
1 public with sharing class RecordNotifyChangeController {
2 @AuraEnabled
3 public static String saveAccount(String recordId,String industry,String phone) {
4 Account accountItem = new Account();
5 accountItem.Id = recordId;
6 accountItem.industry = industry;
7 accountItem.phone = phone;
8 accountItem.Name = industry + phone;
9 try {
10 update accountItem;
11 return 'success';
12 } catch(Exception e) {
13 return 'error';
14 }
15 }
16
17 @AuraEnabled(cacheable=true)
18 public static Account getAccount(String recordId) {
19 Account accountItem = [SELECT Name,Industry,Phone from Account where Id = :recordId limit 1];
20 return accountItem;
21 }
22 }recordNotifyChangeSample.js
1 import { LightningElement, wire,api,track } from 'lwc';
2 import { getRecord } from 'lightning/uiRecordApi';
3 import { refreshApex } from '@salesforce/apex';
4 import saveAccount from '@salesforce/apex/RecordNotifyChangeController.saveAccount';
5 import getAccount from '@salesforce/apex/RecordNotifyChangeController.getAccount';
6 import PHONE_FIELD from '@salesforce/schema/Account.Phone';
7 import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
8 import NAME_FIELD from '@salesforce/schema/Account.Name';
9 export default class RecordNotifyChangeSample extends LightningElement {
10 @api recordId;
11
12 @track phone;
13
14 @track industry;
15
16 @track accountName;
17
18 fields=[PHONE_FIELD,INDUSTRY_FIELD];
19
20 accountRecord;
21
22 // Wire a record.
23 @wire(getRecord, { recordId: '$recordId', fields: [PHONE_FIELD, INDUSTRY_FIELD,NAME_FIELD]})
24 wiredAccount(value) {
25 this.accountRecord = value;
26 const { data, error } = value;
27 if(data && data.fields) {
28 this.industry = data.fields.Industry.value;
29 this.phone = data.fields.Phone.value;
30 this.accountName = data.fields.Name.value;
31 } else if(error) {
32 //TODO
33 }
34 }
35
36
37 handleChange(event) {
38 if(event.target.name === 'phone') {
39 this.phone = event.detail.value;
40 } else if(event.target.name === 'industry') {
41 this.industry = event.detail.value;
42 }
43 }
44
45 handleSave() {
46 saveAccount({ recordId: this.recordId, industry : this.industry, phone : this.phone})
47 .then(result => {
48 if(result === 'success') {
49 refreshApex(this.accountRecord);
50 } else {
51 //TODO
52 }
53 })
54 .catch(error => {
55 //TODO
56 });
57 }
58
59 }recordNotifyChangeSample.html
1 <template>
2 <lightning-card title="use lightning-record-form">
3 <lightning-record-form object-api-name="Account" fields={fields} record-id={recordId} mode="view"></lightning-record-form>
4 </lightning-card>
5
6 <lightning-card title="use lightning input">
7 <lightning-layout multiple-rows="true">
8 <lightning-layout-item size="12">
9 <lightning-input value={accountName} label="Name"></lightning-input>
10 </lightning-layout-item>
11 <lightning-layout-item size="6">
12 <lightning-input value={phone} label="Phone" name="phone" onchange={handleChange}></lightning-input>
13 </lightning-layout-item>
14 <lightning-layout-item size="6">
15 <lightning-input value={industry} name="industry" label="Industry"></lightning-input>
16 </lightning-layout-item>
17 <lightning-layout-item size="12">
18 <lightning-button onclick={handleSave} label="save"></lightning-button>
19 </lightning-layout-item>
20 </lightning-layout>
21 </lightning-card>
22 </template>
效果展示：
1. 下方頁面由幾部分組成，因為在lightning中，一個頁面可能包含多個元件，多個元件可能共用資料，使用LDS得好處是所有得快取都是同一個版本，即一個修改改變了version以後，所有的使用當前LDS的都重新重新整理版本到最新，展示最新的內容。
2. 我們使用 inline edit更改industry的值，更改以後不用重新整理當前頁面，上面的兩部分引用內容會自動改變。
LDS雖然用的爽，但是畢竟有限制，因為只有滿足上面所說的條件才可以共用LDS的快取，如果使用 @wire呼叫後臺apex的程式碼則無法實現 共用LDS從而導致一個頁面各個 component展示出現問題。說到這裡提一下在lwc中 work with data通常的使用順序。
1. 如果需求可以使用 lightning-record-form / lightning-record-view-form / lightning-record-edit-form場景，優先使用。使用此種標籤需要考慮許可權問題，因為使用此標籤許可權取決於當前的 user對當前的表和欄位訪問許可權。如果我們對這個表和欄位沒有相關的許可權，就沒法正常的使用。而且 這三個標籤不是針對所有的表都有效，使用時需要檢視你的表是否支援，比如 Event/Task就不支援。而且這三個表不適用於特別複雜的新建/更新場景。
2. 如果需求使用1所述內容無法實現，可以使用 lwc提供的相關的 wire adapter的方法，比如 getRecord，updateRecord等。此種還是針對大部分standard object以及所有custom object有效，會比1更靈活處理。
3. 使用wire 或者命令式呼叫apex方法處理邏輯。此種適用於以下的場景：
- 用於 wire adapter不支援的object的資料處理，比如 Event / Task;
- 用於user interface不支援的操作，比如 wire adapter提供了允許獲取列表資料的方法，但是沒法設定相關的filter的邏輯，我們就可以使用apex在後臺去處理複雜的邏輯；
- 去處理一個transactional邏輯，比如建立一條 account以後，還想建立一個預設的contact，這種使用 wire adapter無法實現，只能使用apex；
- 隱式呼叫方法，比如我們點某個按鈕或者在生命週期函式中呼叫某些後臺方法。
apex方法好用是好用，因為能搞定任何的場景，但是他有一個缺點，即查詢的資料不是LDS，如果資料進行了更新，本頁面其他的component如果引用了LDS，資料的版本不是最新的版本，則展示了不同步的資料現象。舉例說明，我們對 上面demo中的wiredAccount從getRecord方法換成後臺 通過apex獲取資料。
recordNotifyChangeSample.js
1 import { LightningElement, wire,api,track } from 'lwc';
2 import { getRecord } from 'lightning/uiRecordApi';
3 import { refreshApex } from '@salesforce/apex';
4 import saveAccount from '@salesforce/apex/RecordNotifyChangeController.saveAccount';
5 import getAccount from '@salesforce/apex/RecordNotifyChangeController.getAccount';
6 import PHONE_FIELD from '@salesforce/schema/Account.Phone';
7 import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
8 import NAME_FIELD from '@salesforce/schema/Account.Name';
9 export default class RecordNotifyChangeSample extends LightningElement {
10 @api recordId;
11
12 @track phone;
13
14 @track industry;
15
16 @track accountName;
17
18 fields=[PHONE_FIELD,INDUSTRY_FIELD];
19
20 accountRecord;
21
22 @wire(getAccount,{recordId : '$recordId'})
23 wiredAccount(value) {
24 this.accountRecord = value;
25 const { data, error } = value;
26 if(data) {
27 this.industry = data.Industry;
28 this.phone = data.Phone;
29 this.accountName = data.Name;
30 }
31 }
32
33
34 handleChange(event) {
35 if(event.target.name === 'phone') {
36 this.phone = event.detail.value;
37 } else if(event.target.name === 'industry') {
38 this.industry = event.detail.value;
39 }
40 }
41
42 handleSave() {
43 saveAccount({ recordId: this.recordId, industry : this.industry, phone : this.phone})
44 .then(result => {
45 if(result === 'success') {
46 refreshApex(this.accountRecord);
47 } else {
48 //TODO
49 }
50 })
51 .catch(error => {
52 //TODO
53 });
54 }
55
56 }
結果展示
這種就會充滿了困惑，同一個頁面相同記錄資料展示兩個version，自然使用者這關過不了。如何解決呢？下面就講一下今天的主角：getRecordNotifyChange。
getRecordNotifyChange用於查詢指定的記錄ID或ID列表，將他們的LDS的快取和version重新整理到最新。從而實現apex呼叫情況下，即使在更新了資料情況下，整個頁面的LDS都是最新的。需要注意的是，這個 功能僅用於 version 50及以上版本，如果是48/49或者其他的老版本不支援。具體使用直接上demo
1 import { LightningElement, wire,api,track } from 'lwc';
2 import { getRecord,getRecordNotifyChange } from 'lightning/uiRecordApi';
3 import { refreshApex } from '@salesforce/apex';
4 import saveAccount from '@salesforce/apex/RecordNotifyChangeController.saveAccount';
5 import getAccount from '@salesforce/apex/RecordNotifyChangeController.getAccount';
6 import PHONE_FIELD from '@salesforce/schema/Account.Phone';
7 import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
8 import NAME_FIELD from '@salesforce/schema/Account.Name';
9 export default class RecordNotifyChangeSample extends LightningElement {
10 @api recordId;
11
12 @track phone;
13
14 @track industry;
15
16 @track accountName;
17
18 fields=[PHONE_FIELD,INDUSTRY_FIELD];
19
20 accountRecord;
21
22 @wire(getAccount,{recordId : '$recordId'})
23 wiredAccount(value) {
24 this.accountRecord = value;
25 const { data, error } = value;
26 if(data) {
27 this.industry = data.Industry;
28 this.phone = data.Phone;
29 this.accountName = data.Name;
30 }
31 }
32
33
34 handleChange(event) {
35 if(event.target.name === 'phone') {
36 this.phone = event.detail.value;
37 } else if(event.target.name === 'industry') {
38 this.industry = event.detail.value;
39 }
40 }
41
42 async handleSave() {
43 await saveAccount({ recordId: this.recordId, industry : this.industry, phone : this.phone})
44 .then(result => {
45 if(result === 'success') {
46 refreshApex(this.accountRecord);
47 getRecordNotifyChange([{recordId: this.recordId}]);
48 } else {
49 //TODO
50 }
51 })
52 .catch(error => {
53 //TODO
54 });
55 }
56
57 }
上面demo中主要改了兩部分：
1. 在頭部引入了 getRecordNotifyChange
2. handleSave需要使用 async或者 Promise，demo中使用非同步操作。這個是硬性要求。
結果展示：
總結：getRecordNotifyChange實現了使用呼叫後臺apex情況下，LDS保證是最新的痛點，專案中可能會經常用到，不瞭解的小夥伴快去檢視一下官方文件。篇中有錯誤的歡迎指出，有不懂歡迎留