Apex method not getting invoked in LWC

Question

LWC JS:

import { LightningElement, api, wire, track } from 'lwc';
import getAccDetails from '@salesforce/apex/UI_Controller.getAccountName';
export default class AccordionComp extends LightningElement {
@wire(getAccDetails, { accId: 'Account_Details', parent: '$recordId' }) accDetails(result) {

        if (result.data) {
            console.log('Check output');
            console.log(this.result);
        }
        console.log('before callout');
    }
}

APex:

public with sharing class UI_Controller {
@AuraEnabled (Cacheable = true)
    public static String getAccountName(String accId,String parent) {
        System.debug('$$'+accId);
        return 'Hello World';

    }
}

Answer 1

Behaviour of wired function:

1. It will run for the first time to register wired method where you will get result {data: undefined, error: undefined}

2. Next time onwards, wired function will execute and invoke apex method ONLY when none of the parameters are undefined.

3. If wired function is dependent on dynamic property like $recordId, then it will execute and invoke apex method only when dynamic property changes and not undefined.

In your case its not invoking because recordId is undefined and you are never changing it.

For testing this, you can implement below connectedCallback:

connectedCallback() {
    this.recordId = undefined; // will NOT run since undefined
    setTimeout(() => (this.recordId = 'some id'), 1000); // will run
    setTimeout(() => (this.recordId = 'some other id'), 2000); // will run
    setTimeout(() => (this.recordId = 'some other id'), 3000); // will NOT run since no change in recordId
    setTimeout(() => (this.recordId = undefined), 4000); // will NOT run since undefined although changed
    setTimeout(() => (this.recordId = null), 5000); // will run for null
    setTimeout(() => (this.recordId = 'undefined'), 6000); // will run 
}

Given in the comments above when it will execute and not execute.

NOTE: $ dynamic property is automatically declared. No need of separate declaration in class.