Why does my wire value return null when running in connectedCallback method?

Question

I have an LWC component on a record page which generates a signed URL for an external system, in order for my Apex method to generate the signed URL I need the Order Number from the Record (Order.OrderNum__c), instead of querying this in the Apex I would like to retrieve this using the wire service within the component and then pass to my Apex method.

Using the code below I'm able to retrieve the field I need and print it out on my LWC page, however the connectedCallack method returned undefined.

Can someone explain why this is and how I can resolve this?

import { LightningElement, track, api, wire } from 'lwc';
import getSignature from "@salesforce/apex/iFrameUtils.generateSignedUrl";
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import ORDER_NO from '@salesforce/schema/Order.OrderNum__c';
const fields = [ORDER_NO];
export default class PaymentGateway extends LightningElement {

    @track loaded = false;
    @track url;
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields })
    order;

    get orderNo() {
        return getFieldValue(this.order.data, ORDER_NO);
    }

    connectedCallback() {
        console.log(this.orderNo, 'this.orderNo');
        getSignature({ ref1_value: '$orderNo'})
            .then(result => {
                console.log('got back a result!');
                console.log(result);                
            })
            .catch(error => {
                console.log('error occured');
                console.log(error);
            });
        this.loaded = true;

    }

}

Answer 1

The connectedCallback() lifecycle hook fires when a component is inserted into the DOM. Considering that the wired getRecord method does not fire at the same time or even before connectedCallback, it is normal that you are getting undefined values when invoking getSignature. A better approach would be to use renderedCallback with a condition that determines if getSignature should be fired or to actually have a wired getSignature which is fired when orderNo's value changes, for example:

@wire
(getSignature, { ref1_value: '$orderNo'})
wiredSignature({ data, error }) {
        if (data) {
            //do something
            }
        else if (error) {
          //do something else
        }
    }

Answer 2

I think you should take the imperative call out of the connectedCallback and use 2 wired methods. I wouldn't use a renderedCallback either. First @wire:

@wire(getRecord, { recordId: '$recordId', fields })
order;

This will query for the order and return your ORDER_NO field when the $recordId changes (Assuming the recordId is for an order).

Now you are assuming that the getter invokes the second wire - which I'm not sure it will - check this, and if it doesn't just extract the order number to a regular var and use that as the reactive var below.

@wire(getSignature({ ref1_value: '$orderNo'}))
getSignature({ ref1_value: '$orderNo'})
.then(result => { /*your stuff*/ })
.catch(error => { /*your stuff*/ });