Calling Apex method from LWC

-

 

In this blog post, we will take a look at the steps to call an Apex method from our Lightning Web Component with source code and demonstration videos.

There are the following ways to call an Apex method into LWC:

1. Calling an Apex method using wire services.

2. Calling an Apex method imperatively.

3. Calling and Apex method with async and await.


Now let's take a look at the steps involved in the above-mentioned ways.


Calling Apex method using Wire services

The wire service in LWC helps in the retrieval of data or performing any action without the need for Apex code. You can use the wire service, to wire a property or a function that will receive data when the source is updated.

1. Expose the Apex method which you want to call from LWC

The Apex method should be:
a. Global or Public.
b. decorated with @AuraEnabled, if the method has (cacheable=true) after this annotation, the results are cached at the client site to improve performance.

2. Import the Apex method which you want to call from LWC

To call an Apex method you need to import it in your Lightning Web Component's JS file.



  • apexMethod: this specifies the apex method in your JS file, usually I use the same name as the method name to avoid any confusion.
  • namespace: if the apex class is a part of a managed package specify the namespace of the managed package.
  • className: this specifies the name of the Apex class.
  • apexmethodName: this specifies the name of the apex method that you want to call from LWC.


3. Wire the Apex method to LWC

In LWC you can use @wire adapter to either wire a JS function or property to your Apex method.



Now let's take a look at an example where we are calling two apex methods using wire service from LWC  - 

Apex Class



HTML 



JavaScript



Output (Apex method call without parameter)




Demonstration Video (Apex method call with parameter)



Calling an Apex method imperatively

When you want to have control over the execution of the Apex method invocation (for example - in response to the clicking of a button) use the imperative approach.

As per Salesforce, this approach should be used in the following scenarios:
  1. To call Apex methods that aren't annotated with cacheable=true, which includes methods performing any DML.
  2. To control when the method is invoked in LWC.
  3. To work with objects that arent' supported with User Interface API such as - Task and Event.
  4. To call a method from the ES6 module that doesn't extend Lightning Element.

Now let's take a look at an example where we are calling two apex methods from LWC  using the imperative approach - 

Apex Class



HTML



JavaScript



Demonstration Video



Calling an Apex method using async and await

You can call Apex methods from LWC asynchronously, using async and await keywords in JS. 

In this approach:
  1. The Async function always returns Promises.
  2. The Await function stops and waits for the result of the Async function before going further.
Now let's take a look at an example where we are calling two apex methods from LWC  using the async await approach -

Apex Class

 

HTML



JavaScript




Demonstration Video




Thank you for reading the blog. 


You can share your thoughts with me by dropping a message to me on LinkedIn


You can find my other blogs on my blog page - LWC - Blog

Comments

Post a Comment

Popular posts from this blog

Display Maps in LWC

-
Image
  In this blog, we will look at how to display Google Maps in your Lightning Web Components. Salesforce provides a lightning-map component to display a map of one or more locations, using geocoding data and mapping imagery from Google Maps.  Now, let's look at how to use this component in your Lightning Web component. HTML : Pass the location(s) that you want to display in the map-marker property. A marker contains: Location Information:   A coordinate pair of latitude and longitude, or an address composed of address elements to be geocoded. Descriptive Information:  Optional title, description, and an icon. These items are relevant to the marker but not specifically related to location. Map markers have a few more properties that can be used to customize the map display, please refer to this documentation on Maps. Display a Single Marker Let's understand how we can pass single location info in the map-marker and display it on the map. In this example, we will creat...
Read more

Navigation Service in LWC (Lightning Web Components)

-
Image
Introduction Navigation Service in LWC simplifies navigating between the pages within the applications. Utilizing the navigation service in LWC you can create a smooth and seamless navigation experience for users within your Salesforce application. In this blog post, we will deep dive into the steps on how to use the Navigation Service. What is a Navigation Service? Navigation Service is a built-in module in LWC that enables developers to navigate different pages and components within the Salesforce ecosystem. This service provides you with a set of methods that helps you navigate different web pages, record pages, or other Lightning Components.  Using the Navigation Service 1. Import the Navigation Service from the lightning/navigation module. 2. Apply the NavigationMixin function to the base class. 3. Create a JS PageReference object that defines the page. 4. Call the navigation service's [NavigationMixin.Navigate](pageReference) to dispatch the navigation request. 5. In ...
Read more