DEV Community

Cover image for Connect Apex with Lwc Using @wire - Salesforce
shivamkapasia0
shivamkapasia0

Posted on • Updated on

Connect Apex with Lwc Using @wire - Salesforce

@wire

@wire is basically used to fetch salesforce data using apex or uiRecordApi etc.
The wire service provisions an immutable stream of data to the component.
Note : Objects passed to a component are read-only. To mutate the data, a component should make a shallow copy of the objects it wants to mutate. More Details.

Syntax:

  1. We need to import wire from lwc
import { LightningElement, wire} from  'lwc';
Enter fullscreen mode Exit fullscreen mode
  1. We need to import our apex method from apex class using below syntax:
import apexMethodName from  '@salesforce/apex/Namespace.ApexClassName.MethodName';
Enter fullscreen mode Exit fullscreen mode
  1. we need @wire to call our apex function using below syntax inside our default class:
@wire(apexMethod, { apexMethodParams })
propertyOrFunction;
Enter fullscreen mode Exit fullscreen mode

Example:

Apex class :

public class AccountHelperClass {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList() {
        return [SELECT Id, Name FROM Account];
    }
}
Enter fullscreen mode Exit fullscreen mode

Note: In Apex Class, the function you want to call in lwc .js file, the function should be @AuraEnabled and you must set cacheable=true in case of @wire in lwc.

Marking a method as cacheable improves your component’s performance
by quickly showing cached data from client-side storage without
waiting for a server trip. If the cached data is stale, the framework
retrieves the latest data from the server. Caching is especially
beneficial for users on high latency, slow, or unreliable connections.
Cacheable methods perform better, so use them when possible.

Js File :

import { LightningElement, wire} from  'lwc';
import getAccountList from  '@salesforce/apex/AccountHelperClass.getAccountList';
export  default  class  IterationComp  extends  LightningElement {
@wire(getAccountList) accountList; // directly storing data into variable/property
}
Enter fullscreen mode Exit fullscreen mode

Note : In above function the data from AccountHelperClass.getAccountList will be stored in accountList.

The @wire basically store two object in the prefered property name like in above example, It will store data and error in accountList. So you can use the data using accountList.data and error using accountList.error.

IMPORTANT :
If your Apex Method doesn't require input variables like the above apex method getAccountList, you can simple call apex method like the above one But if it requires input variables like below method

public class AccountHelperClass {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList(Integer noOfEmployees, Boolean emailRequired) {
        return [SELECT Id, Name FROM Account ];
    }
}
Enter fullscreen mode Exit fullscreen mode

In JS file you can simply pass value to Apex method input variable by using same name as mentioned in your apex function like below :

@wire(getAccountList, {noOfEmployees : 5, emailRequired : true }) accountList; 
Enter fullscreen mode Exit fullscreen mode

wire with function :

If you want to store the data and error in different variables you can use function and local variable in your js file like below:

import { LightningElement, wire, track} from  'lwc';
import getAccountList from  '@salesforce/apex/AccountHelperClass.getAccountList';
export  default  class  IterationComp  extends  LightningElement {
    @track record;
    @track error;
@wire(getAccountList) 
/* Here the data and error will be directly pass 
from apex function to wiredAccount function 
and you can name this function as per your choice
*/
wiredAccount({ error, data }) {
        if (data) {
            this.record = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.record = undefined;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

USAGE :

  • HTML File :
<template>
<lightning-card  title="Call Apex From LWC"  icon-name="custom:custom63">
    <div  class="slds-m-around_medium">
        <template  if:true={accountList.data}>
            <template  for:each={accountList.data} for:item="acc">
                <p  key={acc.Id}>{acc.Name}</p>
            </template>
        </template>
        <template  if:true={accountList.error}>
            Error: {accountList.error}
        </template>
    </div>
</lightning-card>
</template>
Enter fullscreen mode Exit fullscreen mode
  • JS File :
import { LightningElement, wire} from  'lwc';
import getAccountList from  '@salesforce/apex/AccountHelperClass.getAccountList';
export  default  class  IterationComp  extends  LightningElement {
@wire(getAccountList) accountList;
}
Enter fullscreen mode Exit fullscreen mode

OR

  • HTML File :
<template>
<lightning-card  title="Call Apex From LWC"  icon-name="custom:custom63">
    <div  class="slds-m-around_medium">
            <template  for:each={record} for:item="acc">
                <p  key={acc.Id}>{acc.Name}</p>
            </template>
                <template  if:true={error}>
            Error: {error}
        </template>
    </div>
</lightning-card>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Js File :
import { LightningElement, wire, track} from  'lwc';
import getAccountList from  '@salesforce/apex/AccountHelperClass.getAccountList';
export  default  class  IterationComp  extends  LightningElement {
    @track record;
    @track error;
@wire(getAccountList)
wiredAccount({ error, data }) {
        if (data) {
            this.record = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.record = undefined;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Result :
Image description

Disadvantage of @wire :

  • Can't control over its run, The function is invoked whenever a value is available, which can be before or after the component is connected or rendered.
  • Can't mutata data in apex function as it use cacheable=true.

Advantages of @wire :

  • More faster than Imperative call.
  • Can be referesh data by using refreshApex().
  • More useful in case of using uiRecordApi.

Discussion (0)