Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Sharing common data to multiple features in Tab component

Avatar

Level 8

Hello Team,

 

In my AEM application, I have tab component. Kept "Component-1" in 1st Tab item section. In this feature, from backend logic, I am fetching the data from 3rd party application via GraphQL. From this I am getting many details like: values, images list.

 

Now, in 2nd Tab item section, I have kept " Component-2". Here, In this component, I need to fetch the same values as above. But, I do not want to call 3rd party application again from my backend.

Note: I cannot move the logic of calling the 3rd party application via graphQL to javascript.

So, I am thinking about Once I get the data from backend of "Component-1", need to keep this data in cookies, or local storage. Then, utilize the same while displaying the data in 2nd tab item section.

 

Let me know your opinion. Thanks in advance

9 Replies

Avatar

Level 3

Hi @Mahesh_Gunaje 

 

Adding my suggestion. 

 

If you are calling JS clientlibs from component level, the call will be triggered based on number of times you have authored the component.

 

Rather than storing the data in cookies / local storage, you can call the javascript client library at page template level

 

Hope this helps

 

Thanks 

Avatar

Level 3

Hi @Mahesh_Gunaje 

 

Have you written JavaScript Ajax call to fetch the data from the third party?


Avatar

Level 5

Hi @Mahesh_Gunaje ,

You can use in-memory caching to optimize repeated data access. Another approach would be to store the response in a service variable.

  1. Create a Common Service with a Service Variable:

    • Implement a service class with a Map variable to act as a cache. Store the API response in this map.
  2. Use an Identifier to Control API Calls:

    • In Component-1's model, generate an identifier that you pass to the service. The service can use this identifier to check if the API needs to be called again.
  3. Reuse Cached Response for Component-2:

    • When Component-2 requests data, pass its identifier to the service. The service will check if the map already has data for this identifier. If the data is present, the service will return the cached response, avoiding an additional API call.

This method allows both components to share data efficiently without redundant API calls.

 

Avatar

Level 8

Hi @PRATHYUSHA_VP 

I cannot move the "calling the GraphQL query" to javascript section. Since, the logic is too heavy to move the logic from java to javascript.

Avatar

Community Advisor

Hi @Mahesh_Gunaje 

You might consider exploring an in-memory caching solution.

One approach is to cache the API response per page and reuse it as needed within the page or based on specific logic.

In our project, we’re using Guava Cache to store responses in memory with a configurable time-to-live (TTL) to efficiently manage cache expiration.

 



Arun Patidar

Avatar

Level 8

Thanks @arunpatidar   @narendiran100   for your help. 

Let me think about some in-memory caching mechanism.

 

One general Query: Is in-memory caching is the solution for component communication in AEM? I mean, I am 100% sure that wherever my 2 components (Component-1, component-2) is used,it is used together only.  That is authored in my Tab component. I mean 1st Tab item: Component-1,  2nd Tab Item - Component-2.

Now, sling model of component-1 has heavy logic to hit the 3rd party GraphQL API and get the response. process it. Passes this to Sightly.

 

 

 

Avatar

Community Advisor

Hi @Mahesh_Gunaje 
In AEM, You generally store content in JCR node and when you need to share the content, you use path reference pattern.

But here you can't use that because data does not exists anywhere in AEM.



Arun Patidar