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.

3
  • 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? Jun 3, 2019 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. Jun 3, 2019 at 14:27
  • This seems like something that you should be loading and scrolling with a GraphQL query, not Layout Service output. Sep 1, 2021 at 21:47

1 Answer 1

1

Don't use placeholder for pages, just have a placeholder for the articlecontainer. In articlecontainer just draw all the fetched articles using normal React practices.

Something like.

{this.state.articles.map((a)=><Article key={a.id} data={a})>)}
1
  • articles in this case could be fetched with a GraphQL query Sep 1, 2021 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.