[SalesForce] LWC Handling Multiple Dependents @Wire methods

How we handle dependent wire in LWC?

For example :

  @wire(getObjectInfo, { objectApiName: OPP_OBJECT })
  objectInfo;

  @wire(getPicklistValues, {
    recordTypeId: '$objectInfo.data.defaultRecordTypeId',
    fieldApiName: STATUS_FIELD
  })
  pickListValues;

  @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
  wiredRecord({ error, data }) {
    if (ldsErrorHandling(error) && data) {
      this._status = getFieldValue(data, STATUS_FIELD);
    }
  }

I have an operation that depends on the Stage Field of opportunity and also the picklist values. With normal promises or callbacks I can know when the two values are not null. If is a normal apex call we can have both information at the same time. But how we handle this type of situations with @wire.

My solution for this (is this the only way?):

  @wire(getObjectInfo, { objectApiName: OPP_OBJECT })
  objectInfo;

  @wire(getPicklistValues, {
    recordTypeId: '$objectInfo.data.defaultRecordTypeId',
    fieldApiName: STATUS_FIELD
  })
  handlePickValues({ error, data }) {
    if (ldsErrorHandling(error) && data) {
      this._data = data;
      this.dependentLogic();
    }
  }

  @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
  wiredRecord({ error, data }) {
    if (ldsErrorHandling(error) && data) {
      this._status = getFieldValue(data, STATUS_FIELD);
      this.dependentLogic();
    }
  }

  dependentLogic() {
    if (this._status && this._data) //do logic
  }

Thank you in advance

Best Answer

According to LWC docs:

The component’s JavaScript prefaces the value of the objectInfo parameter with $ to indicate that it’s dynamic and reactive. It references a property of the component instance. If its value changes, the template rerenders.

Before understanding dynamic and reactive variable lets understand reactive (that is , track).

When track variable is re-assigned/changed in Javascript, LWC will re-render the DOM with updated track variables.

What will happen if dynamic ('$objectInfo') changes?

Well, the wire functions dependent on this variable is triggered.

So, change in dynamic '$objectInfo' will trigger the Javascript functions which are dependent on it. IMPORTANT: this will not re-render DOM.

objectInfo is made both dynamic and reactive by using it as $objectInfo and also decorating it with track.

So, below code will work:

  @wire(getObjectInfo, { objectApiName: OPP_OBJECT })
  objectInfo;

  @wire(getPicklistValues, {
    recordTypeId: '$objectInfo.data.defaultRecordTypeId',
    fieldApiName: STATUS_FIELD
  })
  pickListValues;

Reason: Here second wire will be triggered ONLY after first wire updates objectInfo. Thus pickListValues will be updated after getting objectInfo

Best practice: Do not use '$dynamic' variables in HTML (by decorating as track). Because if you are decorating this dynamic variable as track, 1st it will rerender the DOM before wire is triggered and again after wire gets the data, DOM is rerendered again (leading to performance degradation due to twice rerender of DOM). You can verify this with rerenderedCallback.

Important Notes: https://salesforcesas.home.blog/2019/07/23/dynamic-and-reactive-javascript-class-properties-in-lwc-track-wire-and/

Related Topic