Chain wire methods together in Lightning Web Components

Question

According to the documentation here in order to retrieve a list of picklist values for an object we need to pass in a Record Type Id which can be retrieved using the getObjectInfo method.

The issue is that these are both wire functions and I cannot figure out how to chain these methods.

If I try code like the following:

getObjectInfo({ objectApiName: ACCOUNT_OBJECT })
            .then(result => {
                return getPicklistValues({recordTypeId: result.defaultRecordTypeId, fieldApiName: TYPE_FIELD});
            })
            .then(result => {
                this.picklistValues = result.data
            })
            .catch(error => {
                this.error = error;
            });

I get an error

render threw an error in 'c:getpicklistexample' [Imperative use is not supported. Use @wire(getObjectInfo).]

If I try something like

    @track rtId;

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    handleResult({error, data}) {
        if(data) {
            this.rtId = data.defaultRecordTypeId;
        }
    }

    @wire(getPicklistValues, {recordTypeId: this.rtId,fieldApiName: TYPE_FIELD})
    picklistValues;

Then it throws an internal server error. Anybody have an idea as to how I could retrieve the record type Id and then call to get the pick list values like the documentation suggests?

FYI my imports are:

import { LightningElement, wire, track } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import TYPE_FIELD from '@salesforce/schema/Account.Type';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

Answer 1

You have to use dynamic binding:

@wire(getPicklistValues, {recordTypeId: "$rtId", fieldApiName: TYPE_FIELD})
picklistValues;

This is mentioned in Use the Wire Service to Get Data.

I wrote a mockup that demonstrates this. You should be able to copy-paste this code directly.

---

<template>
    <template if:true={hasPicklistValues}>
        <select>
            <template for:each={picklistValues.data.values} for:item="entry">
                <option key={entry.value} value={entry.label}>{entry.label}</option>
            </template>
        </select>
    </template>
</template>

---

import { LightningElement, wire, track } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import TYPE_FIELD from '@salesforce/schema/Account.Type';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';


export default class Democomponent extends LightningElement {
    @track rtId;
    @track error;

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    handleResult({error, data}) {
        if(data) {
            this.rtId = data.defaultRecordTypeId;
        } else {
            this.error = error;
        }
    }

    @wire(getPicklistValues, {recordTypeId: "$rtId", fieldApiName: TYPE_FIELD})
    picklistValues;

    get hasPicklistValues() {
        return this.picklistValues && this.picklistValues.data && this.picklistValues.data.values;
    }
}