Chapter 30: Access Salesforce Data using Wire Service in Lightning Web Component

Use default import syntax to import an Apex method

import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';

The static import statement is used to import read only live bindings which are exported by another module.

• apexMethodName—A symbol that identifies the Apex method.
• apexMethodReference—The name of the Apex method to import.
• Classname—The name of the Apex class.
• Namespace—If the class is in the same namespace as the component, don’t specify a namespace. If the class is in a managed package, specify the namespace of the managed package.

Interesting Point:

• When an Apex class name changes outside of the JavaScript source file, the class name is automatically updated in the JavaScript source file.
• Method and argument name changes aren’t updated in the JavaScript source file.

Step 2: Call an Apex method as function into Lightning Web Component

• Wire a property
• Wire a function
• Call a method imperatively

Expose Apex Methods to Lightning Web Components

To expose an Apex method to a Lightning web component

• method must be static
• method must be either global or public
• Annotate the method with @AuraEnabled

Enable Client-Side Caching

• Annotating the Apex method with @AuraEnabled(cacheable=true) improves the run time performance.
• To set cacheable=true, a method must only get data, it can’t mutate (change) data.
• Marking a method as cacheable improves 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.
• To use @wire to call an Apex method, you must set cacheable=true

Wire an Apex Method to a Property

If an Apex method is annotated with @AuraEnabled(cacheable=true), we can invoke it from a component via the wire service.

import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';
 @wire(apexMethodName,{ apexMethodParams })propertyOrFunction;

• apexMethodName—A symbol that identifies the Apex method.
• apexMethodReference—The name of the Apex method to import.
• Classname—The name of the Apex class.
• Namespace—The namespace of the Salesforce organization.
• apexMethodParams—An object with parameters for the apexMethod, if needed. If a parameter value is null, the method is called.
• propertyOrFunction—A private property or function that receives the stream of data from the wire service.
  • If a property is decorated with @wire, the results are returned to the property’s data property or error property.
  • If a function is decorated with @wire, the results are returned in an object with a data property or an error property.
  • NOTE The data property and the error property are hardcoded values in the API. You must use these values.

ContactMaster.apxc

• To get contact data, the component wires an Apex method “getContactList”. The Apex method makes a SOQL query that returns a list of contacts.
•  Method must be static, and global or public. The method must be decorated with @AuraEnabled(cacheable=true).

public with sharing class ContactMaster {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
       List<Contact> conList= [SELECT Id, Name, Title, Phone, Email FROM Contact LIMIT 10];
        return conList;
    }
}

contactList.js

• The component’s JavaScript code imports the Apex method and invokes it through the wire service.
• The wire service either gets the list of contacts to the contacts.data property, or returns an error to the contacts.error property.

import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactMaster.getContactList';

export default class contactList extends LightningElement {
    @wire(getContactList) 
    contacts;
}

contactList.html

The template uses the if:true directive to check whether the contacts.data property is true. If it is, it iterates over it and renders the name of each contact.

<template>
    <lightning-card title="ApexWireMethodToProperty" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={contacts.data}>
                <template for:each={contacts.data} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template if:true={contacts.error}>
                <c-error-panel errors={contacts.error}></c-error-panel>
            </template>
        </div>
    </lightning-card>
</template>

Output

errorPanel.html

For Handling errors

<template>
    <template if:true={errors}>
      status: {errors.status}<br />
      statusText: {errors.statusText}<br />
      <template for:each={errors.body} for:item="error">
        statusText: {error.message}
      </template>
    </template>
  </template>

errorPanel.js

import { LightningElement,api } from 'lwc';

export default class ErrorPanel extends LightningElement {
    @api errors;

}

Interesting Point:

The property is assigned a default value after component construction and before any other lifecycle event. Therefore, we can access the property’s value in any function, including functions used by the template or used as part of the component’s lifecycle.

Wire an Apex Method to a Function

This component wires an Apex method call to a function. Because the results are coming to a function, the JavaScript can work on the results.

Also, the template accesses the data a bit differently than if results were provisioned to a property.

ContactMaster.apxc

• This component calls the  Apex method as apexWireMethodToProperty.
• The method must be static, and global or public. The method must be decorated with @AuraEnabled(cacheable=true).

public with sharing class ContactMaster {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
       List<Contact> conList= [SELECT Id, Name, Title, Phone, Email FROM Contact LIMIT 10];
        return conList;
    }
}

contactDisplay.js

• The component’s JavaScript code imports the Apex method and invokes it via the wire service.
• The wire service gets the results to the wiredContacts() function via an object with either an error or data property.
• If the wire service provisions data, it’s assigned to this.contacts, which is used in the template.
• If it provisions error, it’s assigned to this.error, which is also used in the template. If the value of these properties change, the template rerenders.

import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactMaster.getContactList';

export default class contactDisplay extends LightningElement {
 
    contacts;
    error;

    @wire(getContactList)
    wiredContacts({ error, data }) {
        if (data) {
            console.log('data: ', data);
            this.contacts = data;
            console.log('this.contacts: ', this.contacts);
            this.error = undefined;
            console.log('this.error: ', this.error);

        } else if (error) {
            console.log('error ', error);
            this.error = error;
            console.log('this.error: ', this.error);
            this.contacts = undefined;
            console.log('this.contacts : ', this.contacts);
        }
    }
}

contactDisplay.html

• The template uses the if:true directive to check for the JavaScript contacts property. If it exists, it iterates over it and renders the name of each contact.
• If the error property exists, the component renders <c-error-panel>.

<template>
    <lightning-card title="Apex Wire Method To Function" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <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>

Output