Connect LWC with Apex Class and Play With Salesforce Data

Agenda

I am Writing This Blog To share my knowledge with everyone and we can learn

about something in Lightning Web Component. And In this Blog, we are going to

learn different ways to connect a Lightning Web Component (LWC).

Blog Details

This Blog gives us a brief about What is a Lightning Web Component, and how

can we connect a Lightning Web Component with the Apex Class and or an Apex

Method and how can we play with salesforce data in our way.

What we are going to do

We are going to create a Lightning Web Component using VS-Code. And Use the

JavaScript of that file to connect with Apex Class Method. For that, we use different

ways to establish a connection between apex class and LWC and play with the data.

Requirements:

• You need to have access to your org.

• Should have installed the VS Code Installed in your system.
• You should have some basic knowledge of Lightning Web Component.

A Little About Lightning Web Component(LWC)

Lightning Web Components is open-source, empowering you

to explore the source code, customize the behavior for

your needs, and build enterprise-ready web components on any platform, not just Salesforce.

Lightning Web Component or LWC are custom HTML elements built using HTML

and modern JavaScript. We Basically work on ES6(ECMAScript 2015). LWC uses

core Web Components standards and delivers exceptional performance.

We can Connect the JavaScript file of the component to establish a connection with

salesforce data. There are different ways to do it which are as follows:

• Using Wire Services

• Lightning Data Service

• Using the Base Components (Lightning-Record-Form)

• Calling API’s From Apex

• By Long-Running CallOut’s with Continuation

And In that blog, we use Wire Services and see it’s working.

Lightning web components can import methods from Apex classes. The imported methods

are functions that the component can call either via @wire or imperatively.

Syntax

To call an Apex method, a Lightning web component can:

• Wire a property

• Wire a function

• Call a method imperatively

• 
  

Make The Apex Methods available to use in Lightning Web Component:

To expose an Apex method to a Lightning web component, the method must be static

and either global or public. Annotate the method with @AuraEnabled.

To set cacheable=true, a method must only get data, it can’t mutate (change) data.

Call Apex Method Imperatively or from another JavaScript

Call a method imperatively when you must control when the invocation occurs

(for example, in response to clicking a button, or to delay loading to outside the critical path).

We Can call an Apex Method in both ways like imperatively or via @wire only

when a 

A method is marked with @AuraEnabled(cacheable = true).

Refresh Apex After every Callout 

Because whenever the component inserted in the DOM the Data needed to be

refreshed and rendered on the HTML. And for this purpose, we use an already

existed wired function called refreshApex.

You can import refreshApex from @salesforce/apex to query for updated data

and refresh the cache of a wired property. 

And It Will Automatically Refresh Apex after every wired method execution.

And We can also call the Refresh method on button click or from another Java

Script method by using that refreshApex in a method like :

Blog’s Conclusion:

So, the conclusion of the blog is that now we know how to connect a Lightning

Web Component (LWC) with the Apex Class and how can we access Apex class

Method’s and Variables and Use it inside our Lightning Web Component (LWC)

and play with Salesforce data.

And I want you to get familiarized with the Wired method as well as the refreshApex

method.

Thanks, And Regards

Rahul Vaishnav