Apex call from LWC Example

Scenario: Display list of 10 Account records using LWC component.

Solution:
1. Create a method [getListOfAccounts()] under an apex class [AccountHandler.apxc].
2. Make this method [getListOfAccounts()] as @AuraEnabled

AccountHandler.apxc

public with sharing class AccountHandler {

    @AuraEnabled(cacheable=true)
    public static List<Account> getListOfAccounts(){
        return [SELECT Id, Name, AccountNumber FROM Account LIMIT 10];
    }
}

3. Now create below LWC component to call the above apex method and finally display the result.

apexCall.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="apexCall">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

apexCall.html

<template>
    <lightning-card title="Account Details">
        <lightning-layout multiplerows="true" verticalalign="center">
            <lightning-layout-item padding="around-small" size="3">
                <template if:true={lstOfAccounts.data}>    
                    <table class="slds-table slds-table_bordered slds-border_left slds-border_right">
                        <thead>
                            <tr class="slds-line-height_reset">
                                <th class="" scope="col">
                                    <div class="slds-truncate" title="Name">Name</div>
                                    </th>
                                    <th class="" scope="col">
                                    <div class="slds-truncate" title="accId">Account Id</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <template for:each={lstOfAccounts.data} for:item="acc">
                                <tr key={acc.Name} class="slds-line-height_reset">
                                    <td>
                                        <div class="slds-truncate" title="Name">{acc.Name}</div>
                                    </td>
                                    <td>
                                        <div class="slds-truncate" title="accId">{acc.Id}</div>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </template>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

apexCall.js

import { LightningElement, wire } from 'lwc';
import getListOfAccounts from '@salesforce/apex/AccountHandler.getListOfAccounts';

export default class ApexCall extends LightningElement {
    @wire(getListOfAccounts) lstOfAccounts;
}

OUTPUT: