two wires (getRecord, getObjectInfo) in a single in Lightning Web Components (LWC). Need to chain one after the other

Question

I'm trying to fetch the record values and show the label of the fields that have null values on the record detail page.

The code snippet is as below:

objectInfo = {};

@wire(getObjectInfo, {objectApiName: Lead_OBJECT })
LeadInfo({ data, error }) {
    if (data) {
        this.objectInfo = data;
    }
}

@wire(getRecord, {
    recordId: "$recordId",
    fields: ['Company']
})
lead({error, data}) {
    if (data) {
        if (!data.fields['Company'].value) {
            console.log(this.objectInfo.fields['Company'].label);//getting an error here
        }
    }
}

Error is objectInfo is undefined certain times and doesnt understand objectInfo.fields. This doesn't happen every time I load the page, only sometimes this error occurs on refresh. I understand this is because both run asynchronously. what is the way to make this work?

Answer 1

I do something similar to get picklist values for a certain record type, and this works for me - I get the object info, assign the record type I need to the accountRTID variable, which in change triggers the picklist value lookup

import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import STATEOFREP_FIELD from '@salesforce/schema/Account.kw__StateOfCoverage__c';

export default class myClass extends LightningElement {
objectInfo;
accountRTID;

@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
wireObject(result) {
    if (result.data) {
        this.objectInfo = result.data;
        const rtis = this.objectInfo.recordTypeInfos;
        this.accountRTID = Object.keys(rtis).find(rti => rtis[rti].name === 'KW - Member');
    } else if (result.error) {
        this.error = result.error;
    }
}

@wire(getPicklistValues, { recordTypeId: '$accountRTID', fieldApiName: STATEOFREP_FIELD })
stateOptions;

I can then reference the stateOptions value in my component

Answer 2

Can you somehow based on when you require data, do dynamic binding in getRecord ? try making objectInfo reactive (@track), change in dynamic '$objectInfo' will trigger the Javascript functions which are dependent on it.

Answer 3

I had a similar issue.

I ended up loading the Case record manually (not using wire) and I called it from within the "handleLoad" event handler...

js:

handleLoad() {
    this.initializeCase();
}//handleLoad

html:

<lightning-record-edit-form id="caseEditForm" record-id={recordId}
                record-type-id={infoPacket.theCase.RecordTypeId} object-api-name="Case" onerror={handleError}
                onload={handleLoad} onsubmit={handleSubmit} onsuccess={handleSuccess}>

The "initializeCase" function did all my Case loading and initializing and then updated "tracked" variables that all cascade to updates on the LWC. It does appear to load a little "slow" (user can see the fields update after the initial display of the window)... but in my situation the delay is negligible and works well.

Answer 4

You can remove the @wire from getRecord method and call this method in a implicit way, I assume it is being called based on certain events from UI.