@wire service not working for fetching picklist values in child component

Question

I have a parent and child component. In child component, using wire service to fetch picklist values of a custom object. However data and error comes as undefined always. When checked the log, the sequence is like below:

1. Parent connected callback
2. @wire service invoked but data undefined
3. Child connected callback
4. so on...

Code is as below: Parent LWC:

                <template>
                  <template if:true={renderChild}>
                   <c-child-comp></c-child-comp>
                  </template>
                </template>

Child LWC:

         <template if:true={industryPicklist.data}>
           <lightning-combobox name="indType" label="Industry Type" value={indTypeValue}
           options={industryPicklist.data.values} onchange={handleindTypeChange}>
           </lightning-combobox>
        </template>

Child js:

           import ACCCUSTOM_OBJECT from '@salesforce/schema/Account_custom__c';
           import IND_TYPE_FIELD from '@salesforce/schema/Account_custom__c.IndustryType__c';
            ....

           @wire(getObjectInfo, { objectApiName: ACCCUSTOM_OBJECT })
           accCustomMetadata;
           @wire(getPicklistValues, { recordTypeId: '$accCustomMetadata.data.defaultRecordTypeId', 
           fieldApiName: IND_TYPE_FIELD })
           industryPicklist;

The above code works as an independent lwc, however when used with Parent, its not working. Can someone pls point out the issue?

Answer 1

I'm not sure that you're allowed to use dot-notation in a reactive variable this way (at least, there are no examples in the documentation of this).

Use a wire handler to update a variable:

@wire(getObjectInfo, { objectApiName: ACCCUSTOM_OBJECT })
accCustomMetadataHandler({data,error}) {
    if(data) {
        this.defaultRecordTypeId = data.defaultRecordTypeId;
    }
    if(error) {
        this.error = error;
    }
}
defaultRecordTypeId;
@wire(getPicklistValues, { recordTypeId: '$defaultRecordTypeId', fieldApiName: IND_TYPE_FIELD })
industryPicklist;

P.S. you can use conditional directives directly on an object without a template:

<c-child-comp if:true={renderChild}></c-child-comp>

This is also true for for:each and other directives you may want to use. This cuts down on the amount of code you have to maintain.