AEM Cloud Service - Pass Request Parameters in React SPA Model JSON url | AEM Community Blog Seeding | Community
Skip to main content
kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
September 27, 2021

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

  • September 27, 2021
  • 0 replies
  • 518 views

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.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Terms & ConditionsAccessibility statement

Loading footer...