Cannot invoke apex method from lwc

Question

I'm trying to get a list of records(child records of opportunity object), and display them in a lightning datatable on the opportunity lightning record page. However I'm unable to invoke apex method from salesforce lwc, and cannot get it to work. Below are the lwc components & apex class. Is there something that I'm missing?

---

opptyapplicationlist.html

<template>
    <lightning-datatable columns={columns} data={data} key-field="Name">
    </lightning-datatable>
</template>

---

opptyapplicationlist.js

import {LightningElement, track, wire, api} from 'lwc';
import getApplicationListRecords from '@salesforce/apex/ApplicationRelatedListController.getApplicationListRecords';
const columns=[
    {label:"Application Ref #", fieldName:"Name", type:"text"},
    {label:"Account Name", fieldName:"Account_Name__c", type:"text"},
    {label:"Category", fieldName:"Category__c", type:"text"},
    {label:"Date Received", fieldName:"Date_Received__c", type:"date"}
];

export default class OpptyApplicationList extends LightningElement {
    @api recordId;
    @wire(getApplicationListRecords, {strOppId: '$recordId' }) data;
    @track columns = columns;
}

---

ApplicationRelatedListController.apxc

public class ApplicationRelatedListController {
    @AuraEnabled(cacheable=true)
    public static List<Application__c> getApplicationListRecords(String strOppId){
        return [SELECT Id, Name, Account_Name__r.Name, Category__c, Date_Received__c FROM Application__c WHERE Opportunity__c =:strOppId];
    }
}

Answer 1

You can try to call your method in connectedCallback function. Example:

 connectedCallback(){
    getApplicationListRecords({
      strOppId: this.recordId 
    }).then(data => {
        do something...
    }).
    catch(error => {
        bla bla...
    })
}

Answer 2

I was able to get the code working the issue with some minor changes. Beware of stale code, & after deploying the code ensure the source is updated using chrome tools.

---

opptyApplicationList.html

<template>
    <lightning-datatable columns={applColumns} data={applData.data} key-field="Name" hide-checkbox-column=true>
    </lightning-datatable>
</template>

---

opptyapplicationlist.js

import {LightningElement, track, wire, api} from 'lwc';
import getApplicationList from '@salesforce/apex/ApplicationRelatedListController.getApplicationList';

const COLUMNS=[
    {label:"Application Ref #", fieldName:"Name", type:"text"},
    {label:"Account Name", fieldName:"Account_Name", type:"text"},
    {label:"Category", fieldName:"Category", type:"text"},
    {label:"Category", fieldName:"Date_Received", type:"date"}
];

export default class OpptyApplicationList extends LightningElement {
    @api recordId;
    @track applColumns = COLUMNS;
    @wire(getApplicationList,{strOppId : '$recordId'}) applData;
}

---

ApplicationRelatedListController.apxc

    public class ApplicationRelatedListController {

    @AuraEnabled(cacheable=true)
    public static List<OpptyApplications> getApplicationList(String strOppId){
        List<OpptyApplications> lstOppApp = new List<OpptyApplications>();
            for(Application__c app: [SELECT Id, Name, Account_Name__r.Name, Category__c, Date_Received__c FROM Application__c WHERE Opportunity__c =:strOppId]){
                lstOppApp.add(new OpptyApplications(app));
            }
        return lstOppApp;
    }
    @AuraEnabled(cacheable=true)
    public static List<Application__c> getApplicationListRecords(String strOppId){
        return [SELECT Id, Name, Account_Name__r.Name, Category__c, Date_Received__c FROM Application__c WHERE Opportunity__c =:strOppId];
    }
    public class OpptyApplications{
        public OpptyApplications(Application__c app){
            this.Name = app.Name;
            this.Account_Name = app.Account_Name__r.Name;
            this.Category = app.Category__c;
            this.Date_Received = app.Date_Received__c;
        }
        @AuraEnabled public String Name;
        @AuraEnabled public String Account_Name;
        @AuraEnabled public String Category;
        @AuraEnabled public Date Date_Received;
    }
}