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?

1 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 if:false={wiredRecord.data}>
<template if:true={wiredRecord.error}>
  <!-- display error message -->
  • 1
    You can also skip the template tags: <div if:true={wiredRecord.data}>...</div> <lightning-spinner if:false={wiredRecord.data}></lightning-spinner><div if:true={wiredRecord.error}>...</div>.
    – sfdcfox
    Jun 14, 2022 at 4:09
  • How come when I put breakpoints in the Chrome console that I don't see it hitting the method twice then when it finally returns something from the server? Jun 14, 2022 at 10:20
  • Ah I see my issue, I should not be referencing wiredRecord directly in my HTML. I should be creating a tracked variable that get the data result inside my wiredRecord function Jun 14, 2022 at 14:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .