Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

AEM SPA - React - Update React Component after updating Java Model with Query Param

Avatar

Level 3

I have a Java model that populates my react component. The model can take an offset value to return the next 10 newest items which I am passing via a query param (?page=). Right now I am using ModelManager.getData to fetch the json with ?page=2 to return 10 new items. I have this working now by setting state on the whole props object for the component and updating state on click.

 

Im curious if theres a better design pattern for updating java models via query params and then refreshing the front end model in AEM? Or maybe I'm already on the right path.

 

export default class BlogFeed extends Component {

    baseCss = 'BlogFeed';

    constructor(props) {
        super(props);

        this.state = {
          blogFeed: this.props.blogFeed
        };

        this.handleClick = this.handleClick.bind(this)
      }

    handleClick() {
        // Pass param to component model directly
        const componentPath = this.props.cqPath + ".model.json?page=2";

        ModelManager.getData({path : componentPath}).then(blogFeedData => {
             this.setState({
                blogFeed : blogFeedData.blogFeed
             });
        });

    }


    render() {
        return (
            <div className="BlogFeed-container">
                <button onClick={this.handleClick}>GET NEXT PAGE</button>
                 { this.renderBlogs(this.state.blogFeed) }
            </div>
        );
    }

}

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Ideally, you should use a "service" that takes as a parameter your queryString, the "service" could be a Sling Servlet or a GraphQL endpoint, not necessarily a sling model, if you want to stick with the sling model I think what you have done is ok, but the GraphQL is the preferred way, or a servlet which can be invoked by your SPA as if this was a 3rd party service. 

 

Keep in mind that a servlet could be adapted to a Model if the resource is adequate: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-refer-a-sling-model... 

 

I hope this helps.

 



Esteban Bustamante

View solution in original post

2 Replies

Avatar

Administrator

@aanchal-sikka @arunpatidar @markus_bulla_adobe @EstebanBustamante  Can you please review this unanswered question? Appreciate your thoughts on this.



Kautuk Sahni

Avatar

Correct answer by
Community Advisor

Ideally, you should use a "service" that takes as a parameter your queryString, the "service" could be a Sling Servlet or a GraphQL endpoint, not necessarily a sling model, if you want to stick with the sling model I think what you have done is ok, but the GraphQL is the preferred way, or a servlet which can be invoked by your SPA as if this was a 3rd party service. 

 

Keep in mind that a servlet could be adapted to a Model if the resource is adequate: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-refer-a-sling-model... 

 

I hope this helps.

 



Esteban Bustamante