Process results from two different @wire methods after the @wires are finished
Option 1: use wire handlers. Instead of writing an Attribute name, you can write a function, and store the data in attributes, then call a common function when both results are available.
Example
attr1;
attr2;
@wire(getAttr1, {})
attr1result({data,error}) {
if(data) {
this.attr1 = data;
if(this.attr1 && this.attr2) {
this.doProcessing();
}
} // ... errors ... //
}
@wire(getAttr2, {})
attr2result({data,error}) {
if(data) {
this.attr2 = data;
if(this.attr1 && this.attr2) {
this.doProcessing();
}
} // ... errors ... //
}
doProcessing() {
// do something with attr1 and attr2 //
}
Option 2: Use a promise chain. When calling them in order, keep in mind that this will cause a minor performance penalty.
connectedCallback() {
getAttr1({}).then(result => {
this.attr1 = result;
return getAttr2({})
}).then(result => {
this.attr2 = result;
}).finally(()=>this.doProcessing());
}
We can chain wire services by using properties that are both dynamic and reactive by using it as $properties and also decorating it with track.
In the below example I have chained getObjectInfo and getPicklistValues wire services in a manner in which I leverage the data from getObjectInfo into getPicklistValues
import {
LightningElement,
api,
wire,
track
} from 'lwc';
import {
getObjectInfo
} from 'lightning/uiObjectInfoApi';
import {
getPicklistValues
} from 'lightning/uiObjectInfoApi';
export default class PocPicklistFilters extends LightningElement {
// Flexipage provides recordId and objectApiName
// to be passed from calling component
@api objectApiName = 'Account';
@api picklistField = 'Account.Industry';
defaultRecordTypeId; //Master Record Type Id
@track options = [];
@wire(getObjectInfo, {
objectApiName: '$objectApiName'
})
wiredObjectInfo({
error,
data
}) {
if (data) {
console.log('ObjectInfo' + JSON.stringify(data));
this.record = data.recordTypeInfos;
this.defaultRecordTypeId = data.defaultRecordTypeId;
this.error = undefined;
} else if (error) {
this.error = error;
this.record = undefined;
}
}
@wire(getPicklistValues, {
recordTypeId: '$defaultRecordTypeId',
fieldApiName: '$picklistField'
})
wiredPicklistInfo({
error,
data
}) {
if (data) {
console.log('picklist' + JSON.stringify(data.values));
this.processPicklistRawJSON(data.values);
} else if (error) {
console.log(JSON.stringify(error));
}
}
processPicklistRawJSON(_rawData) {
this.options = _rawData.map(row => {
return {
label: row.label,
value: row.value
};
});
console.log('picklistprocessed' + JSON.stringify(this.options));
}
}