[SalesForce] Lightning Web Components – How to pass the result of a wired service to a child component

In a parent component, I am using a wired service to get picklist values for a field.

I would then like to pass those picklist values into a child component via a parameter (@api property) of the child.

I don't want to use the wire service in the child because the child is init on click, and hidden before then. If the wire service only runs when the child is shown, then there is a delay in getting the picklist data. Also I feel it is good to have a dumber child component.

Unfortunately, although I can verify that the parent component is successfully getting the picklist data, the child component always receives an empty object.

Is there a reason why the picklist object wouldn't be passed into the child component?

class ParentComponent extends LightningComponent {

  @wire(getObjectInfo, { objectApiName: MY_OBJECT.objectApiName })
  myObjectInfo;

  @wire(getPicklistValues, {
    recordTypeId: '$myObjectInfo.data.defaultRecordTypeId',
    fieldApiName: 'My_Object__c.My_Picklist_Field__c'
  })
  picklistOptions;
}

<div>
  <template if:true={isModalOpen}>
    <c-custom-modal
      my-picklist-options={picklistOptions}>
    </c-custom-modal>
  </template>
</div>

class ChildComponent extends LightningComponent {
  @api myPicklistOptions;

  connectedCallback() {
    // output is always empty object
    console.log(JSON.parse(JSON.stringify(this.myPicklistOptions)));
  }
}

Best Answer

You need to pass the return from the wire to a @tracked property and then use this property to the child component, so something like:

@track picklistOptions;
@wire(getPicklistValues, {
    recordTypeId: '$myObjectInfo.data.defaultRecordTypeId',
    fieldApiName: 'My_Object__c.My_Picklist_Field__c'
  })
  wiredOptions({ error, data }) {
    if (data) {
        this.picklistOptions = data;
    }
}