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

[gregy68980908]

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>
        );
    }

}

[kautuk_sahni]

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

[EstebanBustamante · Accepted solution]

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.