How to make HTTP callout from LWC

Hello Trailblazers,

In this blog we are going discuss about HTTP callouts from Client-side controller in LWC.

In Aura components we have Apex controller with AuraEnabled method which have code for HTTP callout in it. We call this Apex method on execution of some action and then send the response back to Aura component for processing. But with Lightning Web Components we can easily make callout from Javascript itself using fetch method.

If you are not familiar with fetch method then please checkout this link.

fetch method primarily takes 2 parameters as input which are endpoint and information about request which includes method type, header information , body of the request all in JSON format.

fetch(endpont, { REQUEST_INFO}).then((response => response.json())).then((responseData) => {PROCESS_responseData_HERE});

Let’s start with the implementation. I am going to use Data Faker Heroku app for demonstration. In this example I will be focusing on getting data from third party so will not write any code to represent received data.

Add Endpoint URL to CSP Trusted Sites List

The Lightning Component framework uses Content Security Policy (CSP) to impose restrictions on content. To use third-party APIs that make requests to an external (non-Salesforce) server or to use a WebSocket connection, we have to add CSP Trusted Site.To simplify I would say CSP Trusted Sites are just like Remote Sites in Salesforce. With Remote Sites we allow system to connect with third party from Apex(Server) and with CSP Trusted Sites we allow system to connect with third party from LWC – JavaScript (Client).

1. So now go to Setup > Security > CSP Trusted Sites and Click on New Trusted Site
2. Add Site Name & URL, Keep everything else as it is.
3. Click on Save.

 

You can add * to allow all destinations from your domain in single entry. For example, you can add https://*.herokuapp.com

This step is mandatory for calling third party API from LWC so don’t miss this.

Now lets move on to the next step.

Create Component

Open your VS Code and create new Lightning Web Component with the name httpCalloutExample. Floder Structure will look like below:

httpCalloutExample.html file will have screen elements which has a button to initiate callout and a div to display response received. httpCalloutExample.js is a Javascript controller which will have the logic to make callout and receive response.

httpCalloutExample.html

httpCalloutExample.js

httpCalloutExample.app

Upon successful execution we'll get the response, now we can process this response as per our requirement and use in application. For demo purpose I've just rendered the response string on component as it is.

That's it , you have now eliminated apex execution for HttpCallout. Do let me know your feedback and queries. 

Thanks !