How to access data from wire service on component load?

Question

While working with @wire, I figured out that the data returned from the apex method is not available to use on component load. However, after load, when I I called a method(triggered through event), the data from apex method became accessable.

 @wire (getCurrencySymbol)
    objCurrency({data,error}){
        if(data)
            this.sCurrency = data;
        else
            this.sCurrencyError = error;
    }
get currencySymbol(){
        // eslint-disable-next-line no-console
        console.log('this.sCurrency get : ',this.sCurrency);
        return this.sCurrency;
    }

The data is not accessible inside js using any of the lifecycle hooks.

What I want here is to use this.sCurrency which should hold returned data inside another method which is called from connectedcallback and do some processing. Also, if I use {currencySymbol} on html, it displays the value returned from apex method but is still not accessible inside the other method(which I haven't added in the below code snipper).

Any idea how this can be accomplished?

Answer 1

Wire service is async in nature and all wire services returns promise - which nobody can tell when the response is returned. Ofcourse initially wire service is triggered while registering it when it gets both data and error as undefined but it will fire again when all dependent parameters are valid - in your case there are no parameters, hence it will be triggered again after the process of registration.

Wire service is something comparable to connectedCallback - you cannot invoke it manually though javascript, it will be self invoked only when dependent parameters are valid and changed. So, you need to invoke dependent methods from within wired function:

@track objcurr;
@wire(getCurrencySymbol)
objCurrency({ data, error }) {
    if (data) {
        this.objcurr = data; // not needed if objcurr not used in HTML
        this.dependentMethod(this.objcurr);
    } else if (error) {
        console.error("ERROR ", error);
    }
}

dependentMethod(currData) {
    console.log('currData => ', JSON.stringify(currData));
    // console.log('this.objcurr => ', JSON.stringify(this.objcurr));
}