Calling Apex only fails when set (cachable=true)

Question

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.

Answer 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