How to control meteor data stream with react?

Question

I am using react and meteor, I am having trouble getting data from the server at one time. The component is getting the data in a stream and the component's render function is being called multiple times.

This is the code I am using to get the posts from the server on the client inside the react component with the mixin.

getMeteorData() {
        return {
            posts: Posts.find({}, {sort: {createdAt: -1}}).fetch()
        }
    },

As of now this is getting all of the posts from the server (there is only about 20 in there)

How do I get the data from the server at once so it doesn't stream and call the render function multiple times?

Answer 1

Add extra check if the loading of the data is done for example:

  mixins: [ ReactMeteorData ],
  getMeteorData() {
    var subscription = Meteor.subscribe( 'posts' );

    return {
      isLoading: !subscription.ready(),
      posts: Posts.find({}, {sort: {createdAt: -1}}).fetch()
    };
  },
  render() {
    if ( this.data.isLoading ) {
      return <div>Loading...</div>;
    } else {
      return (
        // now we have data and render once
      );
    }
  }