Callout from Lightning web components

Today we will check how we can make Callout from Lightning web components. We have two methods available here. Firstly we can call the Apex and from there we can make SOAP or REST API callout. and Secondly, we can directly make a simple REST call from the Lightning web components’ controller.
So today we will make a simple REST call from the LWC controller, get the Response, and will display it on UI. For this purpose, we will use Fetch. The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. A basic fetch request is really simple to set up. Have a look at the following code:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

For the demo purpose, we will be making requests to https://icanhazdadjoke.com.

First, we need to add our Endpoint URL to CSP Trusted Site definition. This is a major difference between callout from Apex vs Callout from the LWC controller, As in Apex, we need to add RemoteSiteSetting. While in LWC JS Controller CSP trusted site do the work. If you just added it wait a few minutes before making callouts as it takes few minutes to reflect.

Now we will make the actual callout from the code.

lwcMakeCallout.html

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Make Callout From Lightning Web Components (LWC)
        </h3>
        <div slot="footer">
                
        </div>
        <div class="slds-p-around_medium lgc-bg">
            <lightning-button label="Get The Joke" onclick={getTheJoke}></lightning-button>
        </div>

        <div class="slds-p-around_medium lgc-bg">
            <lightning-textarea readonly value={receivedMessage} rows="7" style="height:150px;"></lightning-textarea>
        </div>   
    </lightning-card>
</template>

lwcMakeCallout.js

import { LightningElement } from 'lwc';

export default class LwcMakeCallout extends LightningElement {
    receivedMessage;
    hasRendered = false;
    
    getTheJoke() {
        const calloutURI = 'https://icanhazdadjoke.com';
        // requires whitelisting of calloutURI in CSP Trusted Sites
        fetch(calloutURI, {
            method: "GET",
            headers: {
                "Accept": "application/json"
              }
        }).then(
            (response) => {
                if (response.ok) {
                    return response.json();
                } 
            }
        ).then(responseJSON => {
            this.receivedMessage = responseJSON.joke;
            console.log(this.receivedMessage);
        });
    }

    renderedCallback() {
        if(this.hasRendered == false) {
            this.getTheJoke();
            this.hasRendered = true;
        }
    }
}

So in the Fetch method, we added our callout URL and added extra parameters including method and Header parameters. We can add more parameters if needed here. once we get the response we directly access that as object and pass the Joke string to the variable.
The main benefit here is we don’t need apex. So we can easily migrate our changes to the production environment. This method is supported by all the modern browsers so we don’t need to worry about cross-browser testing here. So this is how our final output will look.

So did you like the post or do you have any question here. Let me know in comments. Happy Programming 🙂