Full Dynamic Working Code for Calling Apex Methods Synchronously in LWC

Introduction:

In Lightning Web Components (LWC), one of the powerful features is the ability to invoke server-side Apex methods asynchronously using the wire service. However, there are situations where you may need to call Apex methods synchronously to ensure proper execution order or to handle certain scenarios. In this blog post, we will explore a full dynamic working code example that demonstrates how to call Apex methods synchronously in LWC. Let's dive in!

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of Lightning Web Components, Apex, and JavaScript.

Step 1: Setting Up the LWC Component

Start by creating a new LWC component. You can use the Salesforce CLI or the Developer Console to create the component structure.

Step 2: Importing Lightning Message Service

To enable synchronous communication between components, we'll make use of Lightning Message Service (LMS). Add the following import statement to your LWC component's JavaScript file:

import { LightningElement, wire } from 'lwc';

import { CurrentPageReference } from 'lightning/navigation';

import { publish, MessageContext } from 'lightning/messageService';

import SYNC_APEX_CALL from '@salesforce/messageChannel/SyncApexCall__c';

Step 3: Implementing the Apex Method Invocation

Inside your LWC component, define a method that will handle the synchronous Apex call. This method will publish a message to the Lightning Message Service with the Apex method details and await the response. Add the following code to your component's JavaScript file:

export default class SyncApexCallDemo extends LightningElement {

    @wire(CurrentPageReference) pageRef;

    @wire(MessageContext)

    messageContext;

    async callApexMethodSynchronously(apexMethodName, apexMethodParams) {

        const apexCallPayload = {

            methodName: apexMethodName,

            params: apexMethodParams

        };

        const message = {

            recordId: null, // Set the recordId if applicable

            payload: apexCallPayload

        };

        const response = await new Promise((resolve) => {

            publish(this.messageContext, SYNC_APEX_CALL, message, resolve);

        });

        // Handle the response from Apex method

        if (response) {

            // Handle the response data

        }

    }

}

Step 4: Creating an Apex Controller

Create an Apex class to serve as the controller for your LWC component. This controller will be responsible for handling the Apex method invocation. Here's an example of how the Apex controller might look:

public with sharing class SyncApexCallController {

    @AuraEnabled

    public static Object invokeApexMethod(String methodName, Object params) {

        // Handle the Apex method invocation synchronously

        // Return the result or any error message

        return null;

    }

}

Step 5: Handling the Apex Invocation on the Server Side

In your Apex controller, implement the logic to handle the synchronous invocation of the Apex method based on the provided method name and parameters. Perform any necessary processing and return the result or an error message.

Step 6: Handling the Apex Invocation on the Client Side

Back in your LWC component, implement the logic to handle the response received from the Apex method. Customize the code within the if block in the `callApexMethodSynchronously` method to handle the data returned from the Apex method.

Conclusion:

In this blog post, we explored a full dynamic working code example for calling Apex methods synchronously in Lightning Web Components. By leveraging the Lightning Message Service, we were able to establish synchronous communication between components, allowing us to await the response from the server-side Apex method. This approach provides flexibility and control when it comes to handling complex scenarios that require sequential execution. Remember to adjust the code based on your specific requirements and naming conventions. Happy coding!