AEM Remote SPA with React How to fetch and pass model.json to ResponsiveGrid component

[Harish_Moghe_Cpagemini]

I am using react remote spa 

In authoring instance i am using parsys, users are adding some editable react custom components and everything is getting rendered fine as per default configurations with WKND app code.

Now i want to add some business logic, My Requirement is i would be able to pass JSON data to 

<ResponsiveGrid> component instead of passing pagePath and itemPath. Just wanted to stop implicit API call happening to fetch modal.json.

I want to fetch modal.json like JSON from custom source and pass it to responsive grid.

As per documentation I tried passing modal={json} prop, where i kept json with same as  AEM modal,json graphql output.

It does't render page.

I would like to know how we can pass JSON to ResponsiveGrid component and what will be the format structure.

[mahi1729]

First question would be, are you using a custom endpoint instead of calling model.json directly?is that the reason you are trying to pass Json directly? If that's the case are you using local model Dev client to talk to your custom endpoint.? This is crucial for maintaining the mapping of paths and respective model Json. If you don't intend to set page path and item path then at the bare min I assume you have to set cqpath at the component level.. Or else the component will not know how to enable editing on the component. It will be nice if you can mock a sample app and share public url for troubleshooting your use case 

[Harish_Moghe_Cpagemini]

Yes, I want to use external data source which will provide me dynamically (from outside of AEM ) updated model.json

I am using wknd app for editable react components. just that there are some proxies created where <Responsive Grid /> component is fetching corresponding page model json from AEM using some implicit api calls. i just want to have control over that piece of code that instead on AEM model i can get same type of data from somewhere else.

I am just exploring and not hosted app yet.

[pragya96]

Create a customModelClient.js file in your repo, and do something like this below-

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

export default class CustomModelClient extends ModelClient {

  /**

   * Fetches a model using the given a resource path

   *

   * @Param {string} modelPath - Path to the model

   * @Return {*}

   */

  async fetch(modelPath) {
          //write your own fetch logic here
          /* return a promise. from the returned response the ModelManager will have the data now and the AEM editable components can render the props as mapped */

       /* IMP - the response should be in same format/aem component heirarchies as a model.json of that page returns, else you might have issue rendering the AEM editable components */
}