Display Exception message in toast when calling Apex using @wire

Question

I love @wire(ing) LWC properties like

import { LightningElement, wire } from "lwc";

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

export default class MyComponent extends LightningElement {

    @wire(getAccounts)
    accounts = [];
}

to a @AuraEnabled(cachable=true) Apex method

public with sharing class MyCtrl {

    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        try {
            return getViaCallout();
        }
        catch(Exception ex) {
            new ApplicationException().throwAuraHandled(ex);
        }

        return null;
    }
}

But I am unsure about how to handle errors gracefully. E.g. if an exception is thrown in Apex and rethrown as AuraHandledException. How do I catch and display it as an LWC standard toast?

If I would not use @wire I would do:

  loadAccounts() {
    getAccounts()
        .then((result) => {
            this.accounts = result;
        })
        .catch((error) => {
            this.toastError(error, "Appway: Unable to create process");
        });
}


toastError(error, title) {
    this.dispatchEvent(
        new ShowToastEvent({
            title: title,
            message: reduceErrors(error).join(", "),
            variant: "error"
        })
    );
}

Answer 1

When you wire a class field/property, you can handle error only in HTML. You cannot handle error in Javascript (to show toast) by using class property. JS:

@wire(getAccounts)
accounts = []; //class field/property

HTML:

<template if:true={accounts.error}                                              
    <c-error-panel errors={accounts.error}></c-error-panel>
</template>

If you need to use wire decorator and still use only Javascript for error handling, you need to pass wired data to function.

@wire(getAccounts)
wiredAccounts({ error, data }) {
    if (data) {
        this.accounts = data;
        this.error = undefined;
    } else if (error) {
        this.toastError(error, "Appway: Unable to create process");
        this.accounts = undefined;
    }
}

Additional Info:
You cannot use change handlers on properties (by using get/set methods) on tracked or wired properties. You can use them only on public properties (api decorated). Like below:

@api
get accounts() {
    return this._accounts;
}
set accounts(val) { //triggers whenever accounts change
    if (val.data) {
        this._accounts = val;
    } else {
        console.error(val.error);
    }
}

Answer 2

With @wire, you can provide a method instead:

@track accounts = [];

@wire(loadAccounts) 
  wireAccountLoaded({data, error}) {
    if(data) {
      this.accounts = data;
    } else {
      this.toastError(error, 'Errors');
    }
  }

This is demonstrated in the documentation.