Auraで10万件のレコード表示

12702 ワード
Salesforce Aura Apex Auraコンポーネント Salesforce テキストリンク

今回の目的

AuraコンポーネントでApexの呼び出しを分けた場合、ガバナ制限は実行されるApex毎にカウントされる検証は、以前の記事に書きました。今回はそれを利用して、10万件のレコードを表示してみました。ついでに何件までなら画面が耐えるかも検証してみました。

今回のコード

viewBigData.cmp
<aura:component Controller="viwBigDataCmpCtrl" implements="flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" access="global">
    <aura:html tag="style">
        .cuf-content {
            padding: 0 0rem !important;
        }
        .slds-p-around--medium {
            padding: 0rem !important;
        }       
        .slds-modal__content{
            overflow-y:hidden !important;
            height:unset !important; 
            max-height:unset !important;
        }
        .slds-modal__container{
          max-width: 70rem !important;
          width:90% !important;
          height:90% !important;
        }
        .THIS.outerScroller {
            /* fix innerScroller not scrollable */
            border-radius: 1px;
        }
        .THIS.innerScroller {
            /* make innerScroller rounded */
            border-radius: 10px;
        }
    </aura:html>
    <aura:attribute name="record" type="CustomObject__c" />
    <aura:attribute name="List" type="CustomObject__c[]"/>
    <aura:attribute name="exeMessage" default="executing" type="String" />

    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />

    <div class="slds-scrollable" style="height:600px;width:90%;margin-left: 5%;margin-right: 5%;">
        <table>
            <tr>
                <th>自動採番</th>
                <th>テキスト</th>
                <th>数字</th>
            </tr>
            <aura:iteration var="row" items="{!v.List}">
                <tr>
                    <th>{!row.Name}</th>
                    <th>{!row.Text__c}</th>
                    <th>{!row.Number__c}</th>
                </tr>
            </aura:iteration>
        </table>
    </div>

</aura:component>
viewBigDataController.js
({
    doInit : function(component, event, helper) {
        var result1;
        var result2;

        // From here, first Action Start
        var action = component.get("c.getCustomObjectRecords");
        var lastRecoedNumber;
        action.setCallback(this, function(data) {
            var state = data.getState();
            if (state === "SUCCESS") {
                console.log("First action success");
                result1 = data.getReturnValue();
                lastRecoedNumber = data.getReturnValue().pop().ViewName__c;
                console.log(lastRecoedNumber);
                // ２回めのアクションを定義
                var secondAction = component.get("c.getSecondCustomObjectRecords");
                secondAction.setParams({
                    "lastRecordNumber": lastRecoedNumber
                });
                secondAction.setCallback(this, function(secondData){
                    var secondResultState = secondData.getState();
                    if (secondResultState === "SUCCESS") {
                        console.log("Second action success");
                       result2 = secondData.getReturnValue();
                       console.log("Start 1st + 2nd");
                       component.set("v.List", result1.concat(result2));
                    } else {
                        console.log("失敗2");
                    }
                });
            } else {
                console.log("失敗");
            }
            $A.enqueueAction(secondAction);
        });
        $A.enqueueAction(action);
    }
})
viewBigDataCmpCtrl.cls
public with sharing class viwBigDataCmpCtrl {
    public viwBigDataCmpCtrl() {

    }

    @AuraEnabled
    public static List<CustomObject__c> getCustomObjectRecords() {
        return [SELECT Id, Name, Text__c, Number__c, ViewName__c FROM CustomObject__c Order BY ViewName__c ASC LIMIT 50000];

    }

    @AuraEnabled
    public static List<CustomObject__c> getSecondCustomObjectRecords(Integer lastRecordNumber) {
        return [SELECT Id, Name, Text__c, Number__c, ViewName__c FROM CustomObject__c WHERE ViewName__c > :lastRecordNumber Order BY ViewName__c ASC LIMIT 50000];

    }
}

結果

以下のような感じで、10万件表示することが出来ました。

画面に表示するまでに、2分ほどかかります。画面読み込み中は、他のタブに移動したり、他のソフトを実行すると、クロームが固まります。
取得結果をコンポーネントにセットする処理がかなり重いです。
一応、10万件を表示することは可能という感じです。

結論

10万件を画面表示することは可能ですが、操作に耐えうる画面ではないというのが正直な感想です。
そもそも1画面で10万件レコードを表示するだけならVFでも可能です。
さらに1画面で10万件のデータを人間が扱うのは、無理だと思います。

使用用途でいいアイデアが思いついた人は、コメントお願いします。