getRecord doesn't work on initial load

Question

I am trying to do a simple test of the getRecord wire method on an account page.

The code is in this gist: https://gist.github.com/banderson5144/4d5c883b41673cd38e1fd0da5053108c

The problem I am seeing is the getRecord call only has data when the record is updated on the detail page.

When the page is initially loaded, the data variable returns undefined.

Why would this not work on initial load?

Answer 1

@wire decorated methods like getRecord are calling the server to retrieve data. If the component's rendering waited until it was resolved, that would result in a poor user experience that would see nothing while the server calls were processed and returned back to the client. The user wouldn't know if an error has occurred or if they just need to wait a bit.

That's the 'why'

It is precisely because it behaves this way that you can render a loading UI in your component so that the user knows that they just need to hold on while data loads.

A common pattern for this you'll see in many components goes something like this:

<template if:true={wiredRecord.data}>
  <!-- stuff to show your wired record data -->
</template>
<template if:false={wiredRecord.data}>
  <lightning-spinner></lightning-spinner>
</template>
<template if:true={wiredRecord.error}>
  <!-- display error message -->
</template>