LWC component not displaying Account data in screen flow

Question

i have this code which should display some fields of an account list on a screen flow. The component works but when it should display the accounts data it doesn't, it's empty.

public without sharing class AssLeadAccount {


@AuraEnabled(cacheable=true)
public static List <Account> searchLeadAccount(Id recordId) {


    Lead__c LdAn = new Lead__c ();

    if (String.isNotBlank(recordId)){

        LdAn = [SELECT Id, Name, LastName__c, FirstName__c, Email__c, Id_an__c
        FROM Lead__c
        WHERE Id =: recordId
        LIMIT 1];

    }

    List <Account> accList = new List <Account> ();

    if (LdAn != null){

        if (String.isNotBlank(LdAn.Id_an__c)) {

        accList = [SELECT Id, Name, Id_an__c, FirstName, LastName, PersonMobilePhone, PersonEmail, Email__c, Phone
        FROM Account
        WHERE Id_an__c =: LdAn.Id_an__c];
        }      

    }

    if (!accList.isEmpty()){

        return acclist;
    }

    else 
    return null;
} }

This is the apex class, i get the recordId variable in the flow.

    import { LightningElement, api, wire } from 'lwc';
import searchLeadAccount from '@salesforce/apex/AssLeadAccount.searchLeadAccount';

const columns = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' },
    { label: 'Email', fieldName: 'PersonEmail', type: 'email' },
];

export default class displayAccount extends LightningElement {
    @api recordId;
    accounts = [];
    columns = columns;

    renderedCallback() {
        console.log('recordId:', this.recordId);
    }
    
    @wire(searchLeadAccount, { recordId: '$recordId' })
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
        } else if (error) {
            console.error(error);
        }
    }

    handleRowSelection(event) {
        const selectedRows = event.detail.selectedRows;
        if (selectedRows.length) {
            const selectedAccountId = selectedRows[0].Id;
            const selectEvent = new CustomEvent('accountselected', {
                detail: { accountId: selectedAccountId },
            });
            this.dispatchEvent(selectEvent);
        }
    } }

This is the JS class.

<template>
    <lightning-card title="Select account">
        <template if:true={accounts}>
            <lightning-datatable data={accounts} columns={columns}
                onrowselection={handleRowSelection}>
            </lightning-datatable>
            <div class="slds-m-top_medium">
                <lightning-button label="Save" variant="brand" onclick={handleSave}></lightning-button>
            </div>
        </template>
        <template if:true={noAccounts}>
            <p>No account found.</p>
            <div class="slds-m-top_medium">
                <lightning-button label="Create Account" variant="brand" onclick={handleCreate}></lightning-button>
            </div>
        </template>
    </lightning-card>
</template>

And this is the HTML class.

What i did wrong?

Answer 1

You're returning null when there are no accounts, so:

if (data) { // this will never be true if no accounts
  this.accounts = data;
} else if (error) { // ...

This is one reason why you should never return null, because it becomes more difficult to distinguish between "the wire method is provisioning for the first time" and "there was no data returned." See Null Considered Harmful and Say “No” To “Null” for other reasons to avoid intentional null values.

if (!accList.isEmpty()){
    return acclist;
} else {
  return null;
}

Can be reduced to just:

return acclist;

Now, at this point, you still have some problems in your JavaScript.

accounts = [];

Will show the table before you have a chance to load, with no rows. Instead, consider using an actual property:

accountsLoaded = false;

...

@wire(searchLeadAccount, { recordId: '$recordId' })
wiredAccounts({ error, data }) {
    this.accounts = data || [];
    this.accountsLoaded = !!data || !!error;
    error && console.error(error);
}

Now you can use the new lwc conditionals:

<lightning-card title="Select account" lwc:if={accountsLoaded}>
    <template lwc:if={accounts.length}>
        <lightning-datatable data={accounts} columns={columns}
            onrowselection={handleRowSelection}>
        </lightning-datatable>
        <div class="slds-m-top_medium">
            <lightning-button label="Save" variant="brand" onclick={handleSave}></lightning-button>
        </div>
    </template>
    <template lwc:else>
        <p>No account found.</p>
        <div class="slds-m-top_medium">
            <lightning-button label="Create Account" variant="brand" onclick={handleCreate}></lightning-button>
        </div>
    </template>
</lightning-card>
<lightning-spinner lwc:else alternative-text="Loading accounts..."></lightning-spinner>