LWC Life Cycle Methods and Dependent Tables

Question

I'm having trouble using @wire for example to get a single field from an object detail and passing it in to the async connected callback for a query. I need to get some data from a related list on another table and am wondering if I could achieve this with the out of the box lwc stuff or if I am gonna have to write some more specific apex logic to handle the query. I'm reading through the docs and seeing something to the effect of wrapping both method wire? I also have auraEnabled(cacheable=true) to run it on mount(?). The code is something like:

import { LightningElement, api, track, wire } from 'lightning';
import LOOKUP_FIELD from '@salesforce/schema/Account.Lookup__c';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import getData from '@salesforce/apex/Util.getData';

const fields = [ LOOKUP_FIELD ];
export default class TestComponent extends LightningElement {
  @api recordId;
  @track data;
  @wire( getRecord, { recordId:`$recordId`, fields } )
  account; // happens later

  async connectedCallback() {
    // happens first
    const lookup = this.lookup;
    this.data = await getData({ lookup }).catch(err => console.log(err));
  }

  get lookup() {
    return getFieldValue(this.account.data, LOOKUP_FIELD);
  }

}

Answer 1

Wire function is asynchronously invoked by LWC framwork and you have no control/reference over it. And connectedCallback is synchronously invoked on component init.

You should be using wired function and not wired property to achieve your use case - because you have dependent logic on the returned data from wired getRecord.

@wire(getRecord, { recordId: '$recordId', fields })
wiredAccount({ data, error }) {
    if (data) {
        this.account = data;
        const lookup = this.account.fields.Lookup__c.value;
        this.someOtherData = getData({ lookup }).catch(err => console.log(err));
    } else if (error) {
        console.error('ERROR ', error);
    }
}

Note that your parameters for getRecord function are wrong. Its not record, its recordId, also check the syntax.

Answer 2

You can hook up a function to receive the result of an @wire - which means you should be able to call the other code sequentially:

export default class TestComponent extends LightningElement {
  @api recordId;
  @track data;
  @track account;
  _lookup;

  @track
  get lookup() {
      return this._lookup;
  }
  set lookup(value) {
     this._lookup = value;
  }  

  @wire( getFieldValue, { record:'$recordId', fields: FIELDS } )
  wiredAccount({ error, data }) {
      if (data) {
          this.account = data;
          this.lookup = getFieldValue(this.account.data, LOOKUP_FIELD);
          this.data = await getData({ this.lookup }).catch(err => console.log(err));
      } else if (error) {
      //do something
      }
}

Note, there is no need for the getter and setter on lookup - but I left them in as you already had a getter there... perhaps you were needing for something else.