0

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?

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.

1
  • I modified the code as per your example, its working for me. But there are examples $accCustomMetadata.data.defaultRecordTypeId in other blogs and not sure why it didnt work.
    – Kanikala
    Mar 17 at 10:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.