Salesforce LWC學習(三十八) lwc下如何更新超過1萬的數據

背景： 今天項目組小伙伴問了一個問題，如果更新數據超過1萬條的情況下，有什么好的方式來實現呢？我們都知道一個transaction只能做10000條DML數據操作，那客戶的操作的數據就是超過10000條的情況下，我們就只能搬出來salesforce government limitation進行拒絕嗎？這顯然也是不友好的行為。

實現方案： 

1. 代碼中調用batch，batch處理的數據量多，從而可以忽略這個問題。當然，這種缺點很明顯：

　　1）不是實時的操作，什么時候執行取決於系統的可用線程，什么執行不知道；

　　2）如果batch數據中有報錯情況下，我們應該如何處理呢？全部回滾？繼續操作？可能不同的業務不同的場景，哪樣都不太理想。所以batch這種方案不到萬不得已，基本不要考慮。

2. 前端進行分批操作，既然每一個transaction有限制，我們就將數據進行分拆操作，比如每2000或者其他的數量作為一批操作，然后進行后台交互，這樣我們可以實時的獲取狀態，一批數據處理完成以后，我們在進行另外一批。正好博客中貌似沒有記錄這種的需求，所以整理一篇，js能力有限，拋磚引玉，歡迎小伙伴多多的交流溝通。

TestObjectController.cls: 獲取數據，以及更新數據兩個簡單方法

public with sharing class TestObjectController {
    @AuraEnabled(cacheable=true)
    public static List<Test_Object__c> getTestObjectList() {
        List<Test_Object__c> testObjectList = [SELECT Id,Name 
                from Test_Object__c
                ORDER BY CREATEDDATE limit 50000];
        return testObjectList;
    }

    @AuraEnabled
    public static Boolean updateTestObjectList(List<Id> testObjectIdList) {
        List<Test_Object__c> testObjectList = new List<Test_Object__c>();
        for(Id testObjectId : testObjectIdList) {
            Test_Object__c objItem = new Test_Object__c();
            objItem.Id = testObjectId;
            objItem.Active__c = true;
            testObjectList.add(objItem);
        }
        update testObjectList;
        return true;
    }
}

testLargeDataOperationComponent.html

<template>
    <lightning-button label="mass update" onclick={handleMassUpdateAction}></lightning-button>
    <template if:true={isExecution}>
        <lightning-spinner size="large"  alternative-text="operation in progress"></lightning-spinner>
    </template>
    <div style="height: 600px;">
        <lightning-datatable 
            hide-checkbox-column
            key-field="Id"
            data={testObjectList}
            columns={columns}>
        </lightning-datatable>
    </div>
</template>

testLargeDataOperationComponent.js：因為測試環境的數據有 data storage 5M的限制，所以數據達不到1萬條，這里將每批處理的數據進行設置小一點點，打開log，從而更好的查看展示效果。

import { LightningElement, track, wire,api } from 'lwc';
import getTestObjectList from '@salesforce/apex/TestObjectController.getTestObjectList';
import updateTestObjectList from '@salesforce/apex/TestObjectController.updateTestObjectList';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
const columns = [
    {label: 'Name', fieldName: 'Name',editable:false}
];
export default class testLargeDataOperationComponent extends LightningElement {
    @track testObjectList = [];
    @track columns = columns;
    @track isExecution = false;
    @wire(getTestObjectList)
    wiredTestObjectList({data, error}) {
        if(data) {
            this.testObjectList = data;
        } else if(error) {
            console.log(JSON.stringify(error));
        }
    }


    async handleMassUpdateAction() {
        let listSize = this.testObjectList.length;
        let allOperateSuccess = false;
        this.isExecution = true;
        //hard code, default operate 1000 per transcation
        let offset = 200;
        let idList = [];
        for(let index = 0; index < listSize; index ++) {
            idList.push(this.testObjectList[index].Id);
            if(index === listSize - 1) {
                console.log('*** index : ' + index);
                const finalResult = await updateTestObjectList({testObjectIdList: idList});
                if(finalResult) {
                    this.isExecution = false;
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'operation successed',
                            message: 'the records are all updated success, size : '+ listSize,
                            variant: 'success'
                        })
                    );
                    idList = [];
                }
            } else if(index % offset == (offset -1)){
                console.log('---index : ' + index);
                const processResult = await updateTestObjectList({testObjectIdList: idList});
                if(processResult) {
                    idList = [];
                } else {
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'failed',
                            message: 'operation failed',
                            variant: 'error'
                        })
                    );
                    this.isExecution = false;
                    break;
                }
            }
        }
    }
}

效果展示

1. 初始化數據2000條，狀態都是false

2. 當點擊按鈕時，展示spinner，同時每200條數據准備好會在后台進行一次數據操作，結果返回以后，在進行前端的整理，周而復始，一個說不上遞歸的數據操作。

 

 當全部完成以后，展示成功toast信息

 這樣操作就可以實現超過10000條情況下，也可以進行同步的更新操作了。當然，這個現在只是一個初版，有沒有什么問題呢？肯定有，比如在執行某200條數據錯誤的情況下，如何所有的數據進行回滾呢？如何記錄已有的已經操作的數據呢？我們的后台返回類型可能就不是一個布爾類型可以搞定的了，有可能需要一個wrapper去封裝一下曾經操作過的數據的ID，如果真的有錯誤情況下，調用其他的方法進行數據回滾操作（業務上回滾，而不是 savePoint rollback操作，此種實現不了）。

總結：相信不同的老司機對這種需求處理方式會有不同，本篇拋磚引玉，歡迎大神們交流以及給更好的建議意見。篇中錯誤地方歡迎指出，有不懂歡迎留言。