Fetch APIs - NASA's Astronomy Picture of the Day in Lightning Web Component Salesforce
Summary
Using the Fetch API in a Lightning Web Component, you can retrieve and display NASA's Astronomy Picture of the Day within Salesforce. The approach covers configuring Remote Site Settings and Trusted URLs to enable secure API calls, then shows how to implement the fetch request to get image data dynamically. This pattern helps Salesforce developers integrate external REST APIs with client-side LWC code for real-time content display. Teams can build similar API integrations using this guide as a foundation for creating dynamic, data-driven user interfaces.
Takeaways
- Configure Remote Site Settings for external API access in Salesforce.
- Add API and response URLs as Trusted URLs to comply with CSP.
- Use fetch API in LWC connectedCallback to retrieve JSON data asynchronously.
- Bind image URL dynamically in LWC template to display external images.
- Leverage Salesforce Custom Labels for storing API keys securely.
In this blog I will show you an example of using Fetch APIs in Lightning Web Component Salesforce. What are Fetch APIs ? - The Fetch API is a JavaScript interface that makes it easier for developers to fetch data from servers and interact with APIs. It's a modern alternative to XMLHttpRequest, and it uses JavaScript Promises to make requests from web browsers. It's a feature that allows you to make HTTP requests (such as GET, POST, PUT, or DELETE) to a web server. As an example we will be calling APOD - Astronomy Picture of the Day API of NASA to get the image from their server. API url : https://api.nasa.