1

I have a simple article page. I should have an infinite scroll implementation, meaning once a user has reached the bottom of the page, I should load the next article.

How can I render a component after an axios request? I think the good approach is to use a placeholder. I am a rookie on Sitecore JSS, I searched in the doc but I can't find the missing key.


class ArticleContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            component: null
        };
    }

    componentDidMount() {
        this.getNextArticle();
    }

    getNextArticle() {
        const fetchOptions = {
            layoutServiceConfig: { host: config.sitecoreApiHost },
            querystringParams: { sc_lang: 'en', sc_apikey: config.sitecoreApiKey },
            fetcher: dataFetcher
        };

        dataApi.fetchRouteData('/next-article', fetchOptions).then(route => {
            this.setState({
                component: route
            });
        });
    }

    render() {
        return (
            <div>
                <Article
                    title={this.props.fields.title}
                    author={this.props.fields.author}
                    views={this.props.fields.views}
                    datePublished={this.props.fields.datePublished}
                    readTime={this.props.fields.readTime}
                    imageDesktop={this.props.fields.imageDesktop}
                    rendering={this.props.rendering}
                />
                {/* This is where I want the new article to be append dynamically */}
                <section>{<Placeholder name="jss-next-article" rendering={this.state.component} />}</section>
            </div>
        );
    }
}

data.yml - next article

id: next-article
fields:
  pageTitle: Welcome to Article Sitecore JSS
placeholders:
  jss-next-article:
  - componentName: ArticleContainer
    fields:
      title: title of the article
      etc.

  • Everything in a placeholder is in one Sitecore request (exception if there are personalization rules e.t.c) so it is not lazy loading at Sitecore site, but you can still lazy load on client side, but if there many articles, I assume that this is not what you are looking for? what is your next article? what is the way you want to configure this?, store the data? – Jan Bluemink Jun 3 at 14:14
  • By default I have one article using the <ArticleContainer /> component render on page load. The next-article request send the same component than <ArticleContainer />. So this is the same components, I just want to load them one by one. I retrieve the next article correctly, I just don't know how to dynamically render a component via a placeholder. – user3415011 Jun 3 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.