Error in Lightning Web component :afterRender threw an error in 'c:lightning' [Cannot read property 'data' of undefined]

Question

Below is my code for Lightning Web Component:

HTML File:

<template>
    <template if:true = {files.data}>
        <template for:each={files.data} for:item='file'>
            <lightning-card key={recordId} icon-name={file.Title}></lightning-card>
        </template>

    </template>
    <template if:true={error}>

        <c-error-panel errors={error}></c-error-panel>

    </template>

</template>

JS FIle:

import { LightningElement, wire, track, api } from 'lwc';

import getAllRelatedAttachments from '@salesforce/apex/filesWebComponentController.getAllRelatedAttachments';

export default class lightning  extends LightningElement {
    @track files={data:[]};
    @track error;
    @api recordId;


    @wire (getAllRelatedAttachments,{recordId:"$recordId"})
    getallfiles({data,error}){


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

    }
}

My Apex Controller:

public with sharing class filesWebComponentController {
    public filesWebComponentController() {

    }
@AuraEnabled(Cacheable=True)
public static List<ContentVersion> getAllRelatedAttachments(Id recordId){
set<id> parentIDs=new set<id>();
List<Contact> conList = [select Id From Contact where id=:recordId];
    for(Contact con:conList){
        parentIds.add(con.Id);
    }
    if(parentIDs.size()>0){
        system.debug('ParentIDS'+parentIDs);
    }
    List<ContentDocumentLink> files = [SELECT ContentDocumentId, LinkedEntityId FROM ContentDocumentLink WHERE LinkedEntityId IN :parentIDs];
        List<ID> fileIds = new List<ID>();
        for (ContentDocumentLink docLink : files){
        fileIds.add(docLink.ContentDocumentId);
    }

     if(!fileIds.isEmpty()) {
            List<ContentVersion> file =  [SELECT Id, Title, ContentDocumentId FROM ContentVersion WHERE ContentDocumentId IN :fileIds];
            return file;
        }
     else{
        return Null;
        }

    }


}

Answer 1

If files is undefined, you get an error in the template (you do so here when there's an error). Instead, just check to see if it has a value:

<template if:true={files}>

Also, arguably, you shouldn't return "null" when there's no records; that will show an error when no error actually occurred. Your error panel will probably give errors itself in that scenario.

//if(!fileIds.isEmpty()) {
  return [SELECT Id, Title, ContentDocumentId FROM ContentVersion WHERE ContentDocumentId IN :fileIds];
    //}
 //else{
    //return Null;
    //}

Also, you'll get an additional error if your method returns a null value and is cacheable, so again, an empty list is the correct response.