CODEWITHSUNDEEP
javascriptmongodbmeteorreactjs
maudulus
maudulus

Reputation: 11055

Using Meteor subscriptions in React

I am using React.js with Meteor.js, and am trying to use Meteor's subscribe within React, based on a blog post that I'm reading. My thinking here, and please correct me if I'm wrong (I am new to react) is that every time the database changes, specifically the wait collection, the front end will change to reflect this (I will eventually be finding a median value).

However, I'm running into an issue with Meteor.subscribe('wait'), which is supposed to be returning a selection of the mongo collection, but is not. This, I believe, is leading to the error message that I am currently getting, Uncaught TypeError: Cannot convert undefined or null to object. When I log the returned data (as shown), I am just getting undefined. I know the query works because when I run it inside of Meteor.isServer it returns one of the documents from the collection.

So how can I use getMeteorData (shown below) to return data from the wait collection, and have it update the waitTime DOM object whenever there are changes (new documents added, etc.) to the database?

Venue = React.createClass({
  render() {
    var self = this;
    var venueName = this.props.params.venueName;
    return (
      <div className='venue'>
        <h1>This is the Venue {venueName}</h1>
        <WaitTime />
        <div className='wait-time-chooser'>
          <div className="red" onClick={self.waitTime.bind(this,venueName,'red')}>RED</div>
          <div className="yellow" onClick={self.waitTime.bind(this,venueName,'yellow')}>YELLOW</div>
          <div className="green" onClick={self.waitTime.bind(this,venueName,'green')}>GREEN</div>
        </div>
      </div>
    );
  },
  waitTime(currentVenue,time) {
    sendWaitTime(currentVenue,time);
  }
});
function sendWaitTime(venue,time) {
  var userId = Meteor.user()._id;
  $.ajax({
    type: "POST",
    url: "/wait?venue=" + venue + "&wait=" + time + "&user=" + userId,
    success: function(response){
      console.log(response);
    },
    error: function(response){
      console.log("Error:" + JSON.stringify(response));
    }
  });  
}

WaitTime = React.createClass({
  mixins: [ReactMeteorData],
  render() {
    return (
      <div>
        <h3>WAIT TIME: {!$.isEmptyObject(this.data)? this.data.wait : <p>Loading...</p>}</h3>
      </div>
    );
  },  
  componentDidMount() {  
    // wait for task...
  },
  getMeteorData() {
    var data = {};
    var handle = Meteor.subscribe('wait');
    if(handle.ready()) {
      data.wait = Wait.findOne({});
      console.log(data);
    }
    return data;
  }  
});

Upvotes: 0

Views: 264

Answers (1)

maudulus
maudulus

Reputation: 11055

Got it (thanks to the comments and reading this Meteor Doc). Had to do the following on the server: 

if (Meteor.isServer) {
  Meteor.publish('wait', function waitPublication() {
    return Wait.find();
  });
}

I guess I had already removed autopublish, meteor remove autopublish, which comes with Meteor by default.

Upvotes: 0

Related Questions