Call Apex Method in LWC (Imperatively and Wire Service)

There are two ways to call Apex method from Lightning Web Component like:

Wire methods take care of the entire life cycle of an attribute when it changes, including fetching calling the method, updating the attribute, and and refreshing the UI, all in often a single line of code (or just a few for custom error handling).

While you could do all this imperatively, it would require significant amounts of code. In other words, yes, wire methods are basically just a “shortcut” for calling Apex imperatively, Also, specifically, the wired method approach means you don’t need to write custom setters to make sure the method is called every time the attribute is updated, or remember to call the method imperatively every time. This centralizes calling the method to a single location, making it much less likely you’ll forget to call the method when appropriate. link

Call Apex Method Using Wire Service in LWC

AccountController.cls

public class AccountController {
     
    @AuraEnabled(cacheable=true)
    public static list<Account> getAccounts(String strName){
        String strNameLike = '%' +strName +'%';
        return [SELECT Name, AccountNumber FROM Account WHERE Name LIKE :strNameLike];
    }
}

fetchAccounts.js

wire method always ready to execute when any modification found in strSearchText

import { LightningElement, wire } from 'lwc';
import accounts from '@salesforce/apex/AccountController.getAccounts'; //
apex controller method
export default class FetchAccounts extends LightningElement {
    strSearchText;//input parameter

    @wire (accounts, {strName:'$strSearchText'})
    lstAccount;

    changeSearchText(event){
        this.strSearchText = event.target.value;
    }
}

fetchAccounts.html

<template>
    <lightning-card title="Search Accounts">
        <lightning-layout>
            <lightning-layout-item size="6">
                <!-- Displaying Accounts. -->
                <div class="slds-p-left_medium">
                    <lightning-input placeholder="Enter Account Name" onchange={changeSearchText}></lightning-input>
                    <br/>
                    
                    <!-- To display accounts if list is not null-->
                    <template for:each={lstAccount.data} for:item="acc">
                        <div key={acc.Id} class="slds-p-around_medium lgc-bg">
                            <lightning-tile label={acc.Name} type="media">
                                <lightning-icon slot="media" icon-name="standard:groups"></lightning-icon>
                                <p class="slds-truncate">
                                    <lightning-formatted-text value={acc.AccountNumber}></lightning-formatted-text>
                                </p>
                            </lightning-tile>
                        </div>
                    </template>
                    
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

Call Apex Method Imperatively in LWC

To control when the method invocation occurs (for example, in response to clicking a button, or connectedCallback), call the method imperatively. When you call a method imperatively, you receive only a single response.

ContactController.cls

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WHERE Picture__c != NULL
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];
    }
}

imperativeMethod.js

import { LightningElement} from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ImperativeMethod extends LightningElement {
    contacts;
    error;

    handleLoad() {
        getContactList()
            .then(result => {
                this.contacts = result;
            })
            .catch(error => {
                this.error = error;
            });
    }
}

imperativeMethod.html

<template>
    <lightning-card title="ApexImperativeMethod" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <p class="slds-m-bottom_small">
                <lightning-button label="Load Contacts" onclick={handleLoad}></lightning-button>
            </p>
            <template if:true={contacts}>
                <template for:each={contacts} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template if:true={error}>
                <c-error-panel errors={error}></c-error-panel>
            </template>
        </div>
    </lightning-card>
</template>

link