Lighting Web Component

Integration in Lightning Web Components

How to implement Integration in Lightning Web Component using Apex Continuation.

Teja

Jan 27, 2021 • 2 min read

If I were to make a callout using Apex class when the request is initiated from a Lightning Web Component then I will be reaching out to a concept called Apex Continuation.

The purpose of Apex Continuation is to house code that takes more time when compared to the usual requests.

We will be trying to make a HTTP callout so make sure you add the endpoint in the Remote Site Settings. This is a mandate.

Here is the template file of the web component.

<template>
  <lightning-button label="Get Repos" onclick={handleRepos}></lightning-button>
</template>

Template file of the Lightning Web Component

In this example am trying to invoke the Apex method imperatively.

import { LightningElement } from "lwc";

import getAllRepos from "@salesforce/apexContinuation/ContinuationApexController.getAllRepos";

export default class ExpApexContinuation extends LightningElement {
  handleRepos() {
    getAllRepos()
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.log(error);
      });
  }
}

Controller file in the Web Component

The Apex method has to be annotated with @AuraEnabled(cacheable=true continuation=true) and it's a mandate to include continuation=true.

public class ContinuationApexController {

    //constructor
    public ContinuationApexController(){
        
        
    }
    
    @AuraEnabled(cacheable=true continuation=true)
    public static Object getAllRepos(){
        
        //instanting the class by specifying the timeout
        Continuation c = new Continuation(100);
        
        //callback method
        c.ContinuationMethod = 'processResponse';
            
        c.state = 'My own data';      
             
        HttpRequest request = new HttpRequest();
        request.setMethod('GET');
        request.setEndpoint('https://api.github.com/repositories?since=364');
         
        c.addHttpRequest(request);
        return c;
    }
    
    @AuraEnabled(cacheable=true)
    public static Object processResponse(List<String> labels, Object state){
        
        HttpResponse response = Continuation.getResponse(labels[0]);
        String result = response.getBody();
        
        return result;
        
    }
}

Continuation in Apex Class

We are instantiating the class Continuation and specifying the timeout as a param.

//instanting the class by specifying the timeout
Continuation c = new Continuation(100);

Instantiating the class Continuation

We also need to specify the callback method name such that it gets invoked once the callout is made and after the response is sent.

//callback method
c.ContinuationMethod = 'processResponse';

Here we specify the callback method name

If I were to send data from the method to callback method I can do it using state property in Continuation class.

c.state = 'My own data';

This is the state we are sending to the callback

After that I can frame a request with method name and endpoint, but, we are not invoking the send method, we are padding the requests and adding it to the addHttpRequest() method in Continuation class.

HttpRequest request = new HttpRequest();
request.setMethod('GET');
request.setEndpoint('https://api.github.com/repositories?since=364');
         
c.addHttpRequest(request);

Here we are framing the HTTP request

We can have up to three requests that are added up to the method addHttpRequest()

In the callback processResponse(List labels, Object state) labels are going to have the response of the requests added in the method addHttpRequest() and state is going to have the info that we pass from the Apex method.