Welcome back to another Interesting and quick Block, Here you will learn how to send data from your LWC to the APEX method. Here we are having the lightning-input and lightning-button

Want to know how to call apex method from lightning web component , watch the video given below which explains the topic in detail .

This video also discusses the mistake beginners make when they try to call apex from the lighting component.

Code

Apex method of class CommonMethods.cls

    @AuraEnabled(cacheable = true)
    public static String getInputFromLwc(String input){ 
        System.debug('Input value '+ input );
        return input;
    }

JavaScript file of Component

import { LightningElement } from 'lwc';
import getInputFromLwc from '@salesforce/apex/CommonMethods.getInputFromLwc'
export default class GetPicklist extends LightningElement {
    textBoxValue = '';
    onTextChage(event) { 
        this.textBoxValue = event.detail.value;
        this.callApexMethod();
    }
    // this method will send data apex method
    callApexMethod(){
		getInputFromLwc({ input: this.textBoxValue })
	} 
}

Suppose that your apex method returns something here is how to get data from the apex method.

 callApexMethod(){
		getInputFromLwc({ input: this.textBoxValue })
        .then(data => {
            console.log('data from apex ',data)
        })
} 

HTML file of Component

<template>
    <div class="slds-card">
        <h1 class="slds-card__header-title slds-align_absolute-center">Call apex from  lwc </h1>
    </div>
    <div class="slds-card">
        <lightning-input name="input field" label='Input' onchange={onTextChage}  placeholder="Type something"></lightning-input>
        <br>
        <lightning-button name="send" label="sendData" onclick={callApexMethod}></lightning-button>
    </div>
</template>

Thank you .

How the call works

1. The Apex method is marked @AuraEnabled, so a Lightning web component can call it.
2. The component imports the method with @salesforce/apex/ClassName.methodName.
3. You call the imported function like a normal function and pass an object. The property name must match the Apex parameter name. Here the Apex parameter is input, so JavaScript sends { input: value }.
4. The call returns a promise, so you read the result in .then() and handle problems in .catch().

Points to note

• The first example calls Apex on every change event, which means one server call for every key press. Call it from a button click, or wait until the user stops typing.
• It has no .catch(), so an error becomes an unhandled promise rejection.
• A method with cacheable=true must only read data. If your method inserts or updates records, remove cacheable and call it imperatively.

Improved JavaScript

import { LightningElement } from 'lwc';
import getInputFromLwc from '@salesforce/apex/CommonMethods.getInputFromLwc';

export default class CallApex extends LightningElement {
    textBoxValue = '';
    result;

    onTextChange(event) {
        this.textBoxValue = event.detail.value;
    }

    callApexMethod() {
        getInputFromLwc({ input: this.textBoxValue })
            .then((data) => {
                this.result = data;
            })
            .catch((error) => {
                console.error('Apex error', error);
            });
    }
}

Add a button with onclick={callApexMethod} next to the input, so the call runs only when the user asks for it.

Common mistakes

• The JavaScript property name does not match the Apex parameter name.
• The Apex method is not static or lacks @AuraEnabled.
• The class was not deployed, or the import path has the wrong class or method name.
• The call is made without reading the result or the error.

FAQ

Wire or imperative?
Use a wire when the data should load automatically. Use an imperative call when something the user does, such as a click, should trigger it.

Can I pass an object?
Yes. Apex can accept a class or a Map. Send a JavaScript object with matching property names.