When using Mongo collections in Meteor React app, returning an empty array []

Question

When using Mongo collections in Meteor React app, returning an empty array []. I was using the "react-meteor-template" from Github.

I declared

Posts = new Mongo.Collection("posts");

in a Collection.js file.

The following is where I get the empty array [] data

ReadPost = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData() {
        return {
            postsLoading: Posts.find().fetch()
        }
    },
    render() {
        let { postsLoading } = this.data;
        console.log(postsLoading);
       return (
               <div className="container">
                   {
                       postsLoading.map((post) => {
                           return (
                               <div key={post._id} className="col-sm-6 col-sm-offset-3" style={{'marginBottom':"30px", padding: "20px", background: "#FFBABA"}}>
                               <p>Reading post {this.props.postName}</p>
                               <h1 style={{display: "inline"}}>{post.title}</h1>
                               </div>
                           )
                       })
                   }

               </div>
       )
    }
});

Answer 1

While we tend to use subscriptions from routes/templates with blaze/iron:router, we usually subscribe from components in Blaze.

Here is for example a piece of code we use in one of our projects:

getMeteorData() {
        let subscription = Meteor.subscribe('usersList', this.state.limit);
        return {
            subscription: subscription.ready(),
            users: Meteor.users.find({}, {sort: {createdAt: -1}}).fetch()
        };
}

You can now check the subscription readyness in render() and data should normally be loading up. Note that you can still subscribe from flow-router if you want to.