Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

AEM Cloud Service - Pass Request Parameters in React SPA Model JSON url | AEM Community Blog Seeding

kautuk_sahni
Employee
Employee

BlogImage.jpg

AEM Cloud Service - Pass Request Parameters in React SPA Model JSON url by Sreekanth Choudry Nalabotu

Abstract

Extend the React SPA ModelManager to pass request parameters like Access tokens, Cache killer...

Solution
1) Create the maven project for your AEM React SPA...


mvn -B archetype:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=30
-D aemVersion=cloud -D appTitle="Experience AEM Extend Model Client" -D appId="eaem-spa-extend-model-client"
-D groupId="apps.experienceaem.sites" -D frontendModule=react -D includeExamples=n -D includeDispatcherConfig=n


2) Add logic for extending the ModelClient in file ui.frontend\src\utils\extend-model-client.tsx


import { ModelClient } from "@adobe/aem-spa-page-model-manager";

export const extendModelClient = () => {
const client = new ModelClient();

const extend = (modelClient:any) => {
const fetch = modelClient.fetch as Function;

modelClient.fetch = async function (modelPath:string):Promise {
try {
const jsonData = await fetch.call(this, modelPath + "?ck=" + Math.floor(Math.random() * 999999));
return Promise.resolve(jsonData);
} catch (err) {
return Promise.reject(err);
}
};

return modelClient;
};

const modelClient:ModelClient = extend(client);

return modelClient;
}

export default extendModelClient;


3) While initializing the ModelManager pass the extended version of ModelClient eg. #4 in following ui.frontend\src\index.js

Read Full Blog

AEM Cloud Service - Pass Request Parameters in React SPA Model JSON url

Q&A

Please use this thread to ask the related questions.

0 Replies