Afterrenderer error in LWC as wired method return undefined the first time

Question

I recently moved from Aura to LWC and not able to understand whats going wrong here. Below sample code

lwcpage.html

      <template for:each={names} for:item='name'>
          <div key={name.Id} class="customcss" >
             {name.Name}
          </div>
      </template>

lwcpage.js

  import { LightningElement, wire, track } from 'lwc';
  import listViewsRecords from '@salesforce/apex/UserManage.listViewsRecords';

  export default class UsermanageSearchList extends LightningElement 

       items = []; 
       names = [];

      @wire(listViewsRecords, { param : 'param1' }) 
      list({ error, data }) {
      console.log('data-->'+data);
      if(data){

       this.names = data.userLists;
       this.items = data.items;

      }else if (error) {
         this.error = error;
        this.items = undefined;
      }

   }


 }

The 'list' wired method is getting called twice and the first time returns undefined data and the second time data correctly retrieved.

data -> undefined

data -> < data >

Because its getting undefined, the component is giving an after renderer error

'afterRender threw an error in 'c:component' [Cannot read property 'Id' of undefined]'.

What I don't understand is why the wired method always gets called twice and getting undefined ? and if this is expected what needs to be done here?

Answer 1

You just need to prevent the template from rendering until the data is ready:

  <template if:true={names} for:each={names} for:item='name'>
      <div key={name.Id} class="customcss" >
         {name.Name}
      </div>
  </template>

Further, the reason why it's called twice is because it will be called once with data from the cache (which doesn't exist yet), so the data properties will be undefined, but no error will exist yet. Later, the server responds with the data, and your wire method is called again, and the data is then available.

The other way you could handle this is to use the or operator so that the list will at least remain empty, not undefined:

  if(data){

   this.names = data.userLists || [];
   this.items = data.items || [];

  }else if (error) {
     this.error = error;
    this.items = [];
    this.names = [];
  }

Although this could look incorrect depending on how your template is structured. I'd recommend using if:true and if:false to control which templates and/or elements are being displayed.

---

Edit: I neglected to mention that the variables do need to be @tracked, or the component won't update correctly:

@track items = [];
@track names = [];