Make a API call on page load and use across all components in the Page

[rajakumare1]

Hi All,

I am new to the AEM World. What is the best way to make a api all on page load and use the data from the api on all the components in the page. 

Note: Currently I have a OSGI Service and a model that is invokes the OSGi call. Not sure what is the correct design approach.

Thanks,

Rajakumar

[Kiran_Vedantam]

Hi @rajakumare1,

I am not sure if you are wanting to trigger the API call on a particular page or every page with particular resource type.

You can do the below things:

1. You can trigger an ajax call on the page load and call the servlet
2. You can trigger a servlet on page resource type
   1. Issue: Triggers on every page with the same resource
3. Ideal way would be to tie the servlet call to a particular component - hidden and drag and drop the component in the page to get the response and then play with the API response.

Hope this helps.

Thanks,

Kiran Vedantam.

[rajakumare1]

Thanks for your Response.

But how do I share the data accress multiple component in the same page.

all components use the data from the same  api call which again is calling a 3rd party. We dont want to make the same call repeatedly for each component

[Kiran_Vedantam]

You can do multiple things for it.

1. Once you get the data to Front end, do the dom manipulation
2. Save it to a node in AEM and access it from every component

But I am still not clear why every component needs the data. In that case why cant we create a single component by including the resources of different components.

Thanks,

Kiran Vedantam.

[rajakumare1]

Thanks again. The site we are designing is like web app. We have multiple components like Tracking Information, Product Information and so on. The single 3rd party api call has all the details. 

I have not gone in the approach of storing in jcr node as api call is real time data for each unique page load

[sakethchandra02]

I have a use case for doing it in the third way. Can you share more details?

[raj_mandalapu]

Hi @rajakumare1 

There are couple of approaches and how frequently the data is going to change is important thing.

Approach 1: 

• You can make a call to external API, via AJAX and get the response on page load.
• In your components put empty div tags 
• on page load read the response of the Ajax request and dynamically populate the components.
• The advantage with this is you are not hitting AEM server, which will help to reduce load on the AEM instance.
• You need to check the caching strategy for this.

Approach 2:

• If data does not change very frequently then you can write a scheduler which executes every 24 or 12 or 6hrs and gets the data.
• Store that data into the AEM instance by creating separate node.
• Write sling models to read that data
• Instantiate sling models in your components and render.
• If data does not change then there is no point of hitting external API for every request, you do not need to worry about caching here.

[Fanindra_Surat · Accepted solution]

Hi @rajakumare1 ,

Consider below approach -

At a page level, preferably in a Page component Model you can make an API call and save the API response in the request object attribute. Specifically like,

String apiResponse = customService.getResponse();
// Set the api response to the request object attribute
request.setAttribute("result", apiResponse);

To reuse this in component, read the attribute value from the request object itself in the corresponding Sling Model for the component. Sample code below:

// To get the request object
@SlingObject
SlingHttpServletRequest request;

// To read the API response
   String apiResponse = request.getAttribute("result");

This way, your API will be invoked only once, as the Page component model executes only once per page load and the response can then be reused across any component on the page.

Hope this helps!

Thanks,

Fani