4

I have an Account List Lightning Web Component (LWC) that is calling a (cachable=true) Controller method on load and when someone in the UI changes a filter string. The always works as long as the result list is not empty. If empty it renders correctly but then shows this obscure message:

[NoErrorObjectAvailable] Script error. a()@https://static.lightning.force.com/cs83/auraFW/javascript/dOMRLHt4yryfVjId3qhSww/aura_prod.js:903:85 {anonymous}()@https://static.lightning.force.com/cs83/auraFW/javascript/dOMRLHt4yryfVjId3qhSww/aura_prod.js:903:278 r.dispatchEvent()@https://static.lightning.force.com/cs83/auraFW/javascript/dOMRLHt4yryfVjId3qhSww/aura_prod.js:12:5396 r.dispatchSelect()@https://innovation-computing-9921-dev-ed.lightning.force.com/components/interop/buttonMenu.js:2:9451 r.handleMenuItemPrivateSelect()@https://innovation-computing-9921-dev-ed.lightning.force.com/components/interop/buttonMenu.js:2:9410

When I remove the (cachable=true) it always works.

Apex

public with sharing class AccountListCtrl {

    @AuraEnabled(cacheable=true)
    public static List<Api.AccountWrapper> getAccounts(String filter) {
        List<Api.AccountWrapper> result = new List<Api.AccountWrapper>();

        try {
            result = ...
        }
        catch(Exception ex) {
            new AuraHandledException()...
        }

        return result;
    }

HTML

<template>
    <lightning-card>
            <lightning-button-menu slot="actions" onselect={changeFilter} icon-name="utility:filter" menu-alignment="right" variant="border-filled">
                <lightning-menu-item value="myAccount" label="My Accounts"></lightning-menu-item>
                <lightning-menu-item value="teamAccounts" label="Team Accounts"></lightning-menu-item>
            </lightning-button-menu>
            ...
    </lightning-card>
</template>

JS

import { LightningElement, track, api } from "lwc";

import getAccounts from "@salesforce/apex/AccountCtrl.getAccounts";

export default class TaskList extends LightningElement {

    @track accounts = [];

    connectedCallback() {
        this.loadAccounts("myAccounts");
    }

    changeFilter(event) {
        this.loadAccounts(event.detail.value);
    }

    loadAccounts(filter) {
        getProcesses({ filter: filter })
            .then((result) => {
                this.accounts = result;
            })
            .catch((error) => {
                ...
            })
            .finally(() => {
                ...
            });
    }
}

Note: When I remove the (cachable=true) it doesn't fail.

8
  • Have you tried setting a breakpoint in a javascript debugger, such as in Chrome? Usually inspecting the variables there reveals the issue. – Florian Heer Jul 22 '19 at 12:33
  • Sure, but it happend somewhere between the lines. When I take a way the cacchable=true it doesn't fail. – Robert Sösemann Jul 22 '19 at 12:38
  • what is triggering changeFilter? Error is apparently coming from buttonMenu according to your error stack trace. Can you show that code? – salesforce-sas Jul 22 '19 at 13:00
  • 3
    Are you trying to do anything that is invalidating the cache? Something like: salesforce.stackexchange.com/questions/256761/… – Pranay Jaiswal Jul 22 '19 at 13:03
  • 1
    @RobertSösemann I can see, you are not using @wire, that means you are not getting the advantage of cacheable. You are calling everything imperatively, I would use it without cacheable= true. .. That being said, if you wanna do it , it would look a lot like this.processes= [... result]; – Pranay Jaiswal Jul 22 '19 at 14:00
1

Since, lwc works on the concept of mutable objects. So, when you are getting the response from apex in result, then make sure you assign a copy of it in your lwc variable since that the response returned cannot be altered. try using this.accounts = [...result]; and cacheable =true.

Thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.