[Worked Around Solved] getMeteorData() is slow

shock · January 11, 2016, 6:40am

that does not mean it is available during client startup (especially if you dont use fast-render)

sashko · January 11, 2016, 8:02am

Don’t copy this.data into state. Instead, use this.data as the default, and override with this.state like so:

myValue = this.state.myValue || this.data.myValue;

This way, the value will update, unless the user has overridden it.

dinos · January 11, 2016, 2:57pm

Fast-Render makes the userId immediately available. You should use that for auth checks, separate from the user collection. And if you’d want, you could check the user collection and block re-rendering in a componentShouldUpdate until it becomes available, i.e. combined with SSR.

@sylar maybe you want to check out TrackerReact. Here is a basic example, my only one public, that shows how you could deal with user and user authentication:

github.com

D1no/touch2s/blob/master/modules/TodoApp/client/index.jsx#L24


  children: PropTypes.any.isRequired
};


constructor(props, context) {
  super(props);
  this.state = {
    f7: null
  }
}


auth() {
  // Use auth() for auth checks.
  // Fast-Render transports userId() on SSR directly to the client
  // (if he is authed). So we use this for auth checks - faster than Meteor.user()
  return Meteor.userId() ? true : false;
}


user() {
  // Only use user() to get the user object.
  // Meteor.userId is also available on the server via a cookie thanks to fast-render
  let userId = Meteor.userId();

@sergiotapia we have not found any drawbacks. And since the package is literally just a few lines, we decided to bring it into production. On the repo was a issue discussion about that.

One of the benefits is that it brings meteors known plug & play, without freezing states, to react in meteor.

sylar · January 11, 2016, 5:27pm

Ok ill try this and see. Thanks. But Im new to react and more studies needed.

sylar · January 11, 2016, 6:47pm

@sashko Thank you! This worked perfectly!

sylar · January 12, 2016, 8:23am

@sashko Your method did worked; with more code but a user could not clear the field. This made me invested more about Meteor and I’ve found Meteor.autorun.

I had to change my original code from:

sylar:

Meteor.publish(null, function () {
  if (this.userId) {
    return Meteor.users.find({_id: this.userId},
                             {fields: {'regtype': 1, 'profile': 1}});
  } else {
    this.ready();
  }
});

To:

Meteor.publish("userData", function () {
...

I needed to add the subscription to FlowRouter:

FlowRouter.route('/profile', {
  name: 'profile',
  action(){
    var subs = Meteor.subscribe('userData');
    Meteor.autorun(function() {
      if (subs.ready()) {
        ReactLayout.render(App, {
          nav: <Nav />,
          content: <Profile user={ Meteor.user() }/> // passing the props to getInitialState()
        });
      }
    });
  }
});

Now my getInitialState() looks like this:

...

fname: this.props.user.profile.firstName,

...

formSubmit() {
  let fname = this.state.fname;
  let students = {
   firstName: fname,
   ...
  };
  Meteor.users.update( { _id: Meteor.userId() }, {
    
    $set: {profile: students}
  });
},

My render():

<input type="text value={this.state.fname} onClick={this.formSubmit} placeholder="First name" />

Bam! Two-way binding at its best with Meteor and React! Works fast across FF, Safari and Chrome.

Credit to this goes to @Steve

How to wait for the Meteor.users collection gets ready in a library?

Why avoiding Meteor.users? It seem there is something I am missing here :- ) Can’t you just do:

// Server
Meteor.publish('lastMsgRead', function(userId) {
    return Meteor.users.find(userId, { fields: {'profile.lastMsgRead': 1 } });
});


// Client

var subs = Meteor.subscribe('lastMsgRead', Meteor.userId());
Meteor.autorun(function() {
  if (subs.ready()) {
    ...
  }  
});

spacenergy · March 15, 2016, 6:28pm

Meteor.user() || {profile:{}}