LWC @wired isn't calling the Apex Controller

Question

I'm simply trying to get a list of EventActivities from the Apex Controller and feed them to the HTML. No apparent errors, but the records are not showing on the front-end.

I've been at this for some hours. In the Apex logs, neither of my debug statements print. So it seems my JS file is not connecting with my Apex controller.

---

eventActivityChecklist.html

<template>
  <lightning-card title="Event Activities" icon-name="custom:custom14">
    <ul class="slds-m-around_medium">
      <template for:each={activities.data} for:item="activity">
          <li key={activity.Id}>
              {activity.Name}, {activity.Title__c}
          </li>
      </template>
  </ul>
  </lightning-card>
</template>

---

eventActivityChecklist.js

import { LightningElement, wire } from 'lwc';
import getAllEventActivities from '@salesforce/apex/EventActivities_Ctrl.getAllEventActivities';

export default class EventActivities extends LightningElement {
  @wire (getAllEventActivities) activities;
}

---

EventActivities_Ctrl.cls


public with sharing class EventActivities_Ctrl {

    @AuraEnabled
    public static List<Event_Activity__c> getAllEventActivities() {
        System.debug('*** In getAllEventActivities from Controller');              
        List<Event_Activity__c> activities = new List<Event_Activity__c>();
        activities = [SELECT id, Title__c, Type__c 
                      FROM Event_Activity__c 
                      ORDER BY Type__c ASC];
        System.debug('*** Activities from Controller: '+ activities);              
        return activities;
    }
}

Answer 1

A few things to try:

• Check your class runs from exec anon
• Check profile permissions on your class
• Check profile permissions on the returned object
• Change to an imperative call
• Change the handler to an explicit one, so you can log any errors to the console. This is likely to be your best bet, so do this first:

activities = [];
eventActivities({ error, data }) {
    if (data) {
        //note you'll need to change your template to handle this - remove the `data` object when you access activities
        activities = data;
    } else if (error) {
        console.log(error);
    }
}

Answer 2

Caspar's list was helpful. Per his suggestion, I changed to explicit version of @wired

@wire (getAllEventActivities) activities({data,error}){
    if (data) {
      console.log(data); 
    } else if (error) {
      console.log(error);
    }
  }

On the browser console, it said I need to include cacheable in my Apex class.

Simply adding (cacheable=true) here is what made the backend data available to the front-end.

@AuraEnabled (cacheable=true)
public static List<Event_Activity__c> getAllEventActivities() {
    System.debug('*** In getAllEventActivities from Controller');              
    List<Event_Activity__c> activities = new List<Event_Activity__c>();
    activities = [SELECT id, Title__c, Type__c 
                  FROM Event_Activity__c 
                  ORDER BY Type__c ASC];
    System.debug('*** Activities from Controller: '+ activities);              
    return activities;
}