Making a Request via LWC Component to Apex Method in Salesforce

Introduction: In Salesforce development, Lightning Web Components (LWC) provide a modern and efficient way to build user interfaces. One common scenario is making server-side requests to perform operations or retrieve data. In this article, we will explore how to make a request from an LWC component to an Apex method using the @wire decorator and demonstrate it with a code example.

Step 1: Create the Apex Method To begin, let's create an Apex method that will be called from the LWC component. This method can perform any server-side logic, such as retrieving data from the database or updating records. Here's an example of an Apex method called getDataFromServer:

public with sharing class MyController { 
@AuraEnabled
    public static String getDataFromServer(String input) { 
       // Perform server-side logic here
        
       return 'Response from server for input: ' + input;
     } 
}

Step 2: Create the LWC Component Next, let's create the LWC component that will make the server-side request to the Apex method. Here's an example of an LWC component called myComponent:

html
<template>
    <lightning-card title="Make Server Request">
        <div class="slds-m-around_medium">
            <lightning-input label="Input" value={inputValue} onchange={handleInputChange}></lightning-input>
            <lightning-button label="Submit" onclick={handleSubmit}></lightning-button>
            <div>{response}</div>
        </div>
    </lightning-card>
</template>

javascript
import { LightningElement, wire } from 'lwc';
import getDataFromServer from '@salesforce/apex/MyController.getDataFromServer';

export default class myComponent extends LightningElement {
    inputValue = '';
    response = '';

    handleInputChange(event) {
        this.inputValue = event.target.value;
    }

    handleSubmit() {
        getDataFromServer({ input: this.inputValue })
            .then(result => {
                this.response = result;
            })
            .catch(error => {
                // Handle error
                console.error(error);
            });
    }
}

In the above code snippet, we import the getDataFromServer method using the @salesforce/apex module, which allows us to call Apex methods from within our LWC component. We define an inputValue property to hold the user input and a response property to display the server's response. The handleInputChange method updates the inputValue property whenever the input field changes. The handleSubmit method calls the Apex method getDataFromServer with the input value and updates the response property with the server's response.

Step 3: Wire the Apex Method to the LWC Component To wire the Apex method to the LWC component, we use the @wire decorator. In our case, we don't need to retrieve data on component initialization, so we omit the wire decorator from the component class. However, if you want to fetch data on component initialization, you can add the following code snippet to the component class:

javascript
@wire(getDataFromServer, { input: '$inputValue' })
wiredMethod({ error, data }) {
    if (data) {
        // Handle successful response
        this.response = data;
    } else if (error) {
        // Handle error
        console.error(error);
    }
}

Conclusion: By utilizing the @wire decorator and importing the Apex method from the @salesforce/apex module, we can seamlessly make server-side requests from our LWC component to