LWC: how to handle null situation before the data is loaded from controller

Question

Suppose I am having something like:

<div>{order.name}</div>

In my lwc code, and I am reading the data from apex controller using something like:

import getOrderLines from '@salesforce/apex/Controller_OrderLinesUI.getOrderLines';

Not a wired method.

I will be getting order is undefined error. That's because order is null before the data is loaded from the apex controller.

The previous walkaround we are using is to put the div code inside a if:true template like:

<template if:true={order}>

This approach is working but a bit awkward to me. Is this the suggested way of doing this or is there a more elegant way?

Answer 1

The approach you have right now is the correct and recommended way of doing this.

<template if:true={order}>

Because you are using an apex method imperatively here, the imported function whenever invoked returns a Promise. The order property that you have in your JS will only get populated once the Promise is completed. So if you attempt to refer any member properties even before the order itself has been populated, that will result in a null exception.

This approach and details around imperative apex methods is outlined in Call Apex Methods documentation. You can use any other Boolean property instead of using order which say is set to true only when the apex method is invoked. But that will just substitute the order with any other variable, the overall logic still remains the same.