LWC Wire and Imperative

LWC Wire and Imperative

The purpose of this article is to demonstrate how to make lightning web component calls to the apex: method. You can do this in two ways:

1. Using @wire to wire a property or Using @wire to wire a function.
2. Using Imperative

Using @wire to wire a property or Using @wire to wire a function.

Using @wire to wire a property

Lightning web components can call apex methods from Apex classes into the client-side classes. After importing the apex class method we can call the apex methods as functions into the component by calling wire service. The Apex Method should be started with @AuraEnabled.

public class accountclass {
   @AuraEnabled (cacheable=true)
   public static List<account> accountclass() {
       List<Account> acc=[select id,name from Account limit 5];
       return acc;
   }
}
import accountclass from '@salesforce/apex/accountclass.accountclass';
export default class AccountListLWC extends LightningElement {
   @track accounts;
   @track error;
   @wire(accountclass) accounts;
}
<template>
   <lightning-card title="Account List using Apex Wire To Function in Salesfroce" icon-name="custom:custom63">
       <div class="slds-m-around_medium">
           <template if:true={accounts}>
               <template for:each={accounts} for:item="acc">
                   <p key={acc.Id}>{acc.Name}</p>
               </template>
           </template>
           <template if:true={error}>
               {error}
           </template>
       </div>
   </lightning-card>
</template>

Using @wire to wire a method

import { LightningElement, wire,track } from 'lwc';
import accountclass from '@salesforce/apex/accountclass.accountclass';
export default class AccountListLWC extends LightningElement {
   @track accounts;
   @track error;
   @wire(accountclass)
   wiredAccounts({ error, data }) {
       if (data) {
           this.accounts = data;
       } else if (error) {
           console.log(error);
           this.error = error;
       }
   }
}

Using Imperative

Consider the case when you do not want an apex method to be called when the component is loaded. In order to invoke the apex method on click of a button, or in response to a certain logic, we could invoke the apex method in an imperative fashion.

import salesforcegetAllActiveAccounts from '@salesforce/apex/accountclass.accountclass';
export default class salesforce extends LightningElement {

   @track accountsList;
   @track showAccounts;
  
   onShowClickSalesforce(){

       salesforcegetAllActiveAccounts()
       .then(result => {
               this.accountsList = result;
               this.showAccounts = true;
       })
       .catch(error => {
           console.log('Errorured:- '+error.body.message);
       });
   }
   onHideClickSalesforce(){
       this.showAccounts = false;
   }
}
<template>
   <lightning-card icon-name="standard:person_account" title="Imperative Apex Call">
      
       <lightning-layout horizontal-align="spread">
           <lightning-layout-item padding="around-medium">
               <lightning-button label="Salesforce Show Accounts" onclick={onShowClickSalesforce}></lightning-button>
           </lightning-layout-item>
           <lightning-layout-item padding="around-medium">
               <lightning-button label="Hide Accounts" onclick={onHideClickSalesforce}></lightning-button>
           </lightning-layout-item>
       </lightning-layout>


       <lightning-layout multiple-rows="true">
           <template if:true={showAccounts}>
               <template for:each={accountsList} for:item="account">
                   <lightning-layout-item size="12" key={account.Id}>
                       <div class="slds-text-align_center">
                           {account.Name}
                       </div>
                   </lightning-layout-item>
               </template>
           </template>
       </lightning-layout>


   </lightning-card>
</template
public class accountclass {
    @AuraEnabled (cacheable=true)
    public static List<account> accountclass() {
        List<Account> acc=[select id,name from Account limit 5];
        return acc;
    }
}

A call will be made to the Apex method. When you use then and catch, you will get the result into your local variables because imperative calls return promises, so you should resolve your promises into a result or error object.