How to call an Apex Method in lightning web component

Hello guys, here I want to tell you that how to call an Apex Method  from Lightning Web Components.

After wiring up SObjects, now we are looking into Apex backend integrations. It’s important to understand that a lot of things with SObjects can be done using services, so maybe you don’t need that many Apex at all! :)

But if you need Apex, it is very easy and flexible to connect. An Apex method result can be a primitive type, a map or list of primitives, an @AuraEnabled Object, an SObject or a list of them. Any Object which is not AuraEnabled is not permitted, so for example Schema.SObjectType won’t work.

First you need to import your Apex methods using this idiom in Js.File 

And from this point they are available (almost) like JavaScript methods! How cool is that? There are several tactics to call them, and it really depends on your goal. I describe here the 3 most basic ones, and when they are adequate in Lightning Web Component

Passing parameters

If the Apex method has parameters, you have to pass them. This is very simple: you pass a JavaScript object to the method, where every property name is the name of the backend parameter. Look into the next code example: 

The format is the same for wired and imperative Apex calls.

Wire to a property 

When: when the return data is very simple, you need it once, and you can process it on the HTML side.

The main advantage of this that it’s a one-liner. For example, a text message, a Boolean or a list of numbers should be received from Apex. (it is important to say here that for wired methods you should add the cacheable=true decorator to the method on Apex end!).

 The template uses the if:true directive to check whether the contacts.data property is truthy. If it is, it iterates over it and renders the name of  contacts where Name is Jhon. If contacts.error is truthy, the component renders <c-error-panel>.

Wire to a function 

When: when the return value needs some processing.

The idiom works very similarly to previous one; the only difference is that when the apex is returned, the result is passed to the function. The result (r in this example) is an object, with data and error properties. In this example, we get a map of available sObjects in the org, and turn it into a list in our component (this.soMap).

Imperatively 

When: when the return value needs some processing.

This method is different from wiring. First, you don't need to set the Apex backend to cacheable= true.

Second, instead of resulting a data-error object, it results a Promise.This can be called inside of a controller method.

 

 So,instead of wiring the method's result a property( or a function), you decide at what point in execution you want to call it. Maybe you don't want to call it at all!

Summarize

1- Import the Apex method into the JS.

2- If it is wired, Make sure cacheable = true decorator is set.

3- Parameters are passed as an object.

4- For simple results:  wire to a property.

5- For some processing: wire to a function.

6- For controlling when to call: Imperative.