How to use data-sly-use in SPA React for content fragments?

[sesmic]

Hi All,

We are working on custom SPA component which is supposed to take the given content fragment & use its field on page. 

In sites custom component we achieved this simply by using below snippet in html & it works fine. cfPath is content fragment path selected in component dialog's pathbrowser field.

<sly data-sly-test.cfPath="${'{0}/jcr:content/data/master' @ format=properties.cfPath}"
data-sly-use.cf="${cfPath}">
<p>${cf.fieldFromCF}</p>
<sly>

So, can anyone please help me to achieve the above SPA react?

Any hint on this would be helpful.

Thanks,

sesmic

[EstebanBustamante · Accepted solution]

Hi, 

I think you might be confused about how the SPA React approach works. The idea is to delegate the rendering of components to the UI framework—in this case, React—so you no longer interact with HTL. Please check this link: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles... to better understand the parties involved in this architecture.

To use content fragment information, you should expose it through a REST service via GraphQL. Please refer to this resource to learn more about it: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/headless/graphql... 

Hope this helps.

[sesmic]

Hi @EstebanBustamante ,

Thanks for the response. The links you provided looks useful, will go through it.

But I got the desired output by using Sling Model with resource resolver & content fragment path which is then used in my react component via props.

Thanks again