Advanced Salesforce LWC Interview Questions and Answers 2

Explain ‘ @AuraEnabled(cacheable=true)’ Annotation. Give an example of how you can use it.

The @AuraEnabled(cacheable=true) annotation is used in Apex controllers to make methods available to Lightning Web Components (LWC) and Aura components while enabling the results to be cached on the client side. This improves performance by reducing server calls when the same data is requested multiple times.

• Enables caching of data on the client side for better performance.
• Used for methods that perform read-only operations (querying records or retrieving data).
• Improves responsiveness by reducing server round trips.

public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List getAccounts() {
// Query to fetch all active accounts
return [SELECT Id, Name, Industry FROM Account WHERE IsActive__c = true];
}
}


What are the ways to call Apex from LWC component ?

You can call the Apex method using either:

1. Imperative Call
   Use when you want more control, such as calling the method on a button click or with dynamic parameters.
2. Wire Service
   Use when you want declarative data binding and automatic caching.

Imperative vs. Wire Service

Can you write the Code/logic to call Apex using  Imperative Call ?

.JS

import { LightningElement, track } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class ContactList extends LightningElement {
@track contacts = [];
@track error;

// Method to call Apex
fetchContacts() {
getContacts()
.then((result) => {
this.contacts = result; // Assign result to contacts
this.error = undefined;
})
.catch((error) => {
this.error = error; // Capture the error
this.contacts = [];
});
}
}

.HTML

<template>
<lightning-card title=”Contact List” icon-name=”standard:contact”>
<lightning-button label=”Fetch Contacts” onclick={fetchContacts} variant=”brand”></lightning-button>

<template if:true={contacts}>
<ul>
<template for:each={contacts} for:item=”contact”>
<li key={contact.Id}>{contact.Name} – {contact.Email}</li>
</template>
</ul>
</template>

<template if:true={error}>
<p class=”slds-text-color_error”>Error: {error.body.message}</p>
</template>
</lightning-card>
</template>

Can you write the Code/logic to call Apex using  Wire Service ?

.JS

import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class ContactList extends LightningElement {
@wire(getContacts)
contacts; // Automatically fetches contacts
}

.HTML

<template>
<lightning-card title=”Contact List” icon-name=”standard:contact”>
<template if:true={contacts.data}>
<ul>
<template for:each={contacts.data} for:item=”contact”>
<li key={contact.Id}>{contact.Name} – {contact.Email}</li>
</template>
</ul>
</template>

<template if:true={contacts.error}>
<p class=”slds-text-color_error”>Error: {contacts.error.body.message}</p>
</template>
</lightning-card>
</template>