Collection Queries in Meteor React

Beginner here.
I have the following code written in meteor react,

  render () {
    let conversations =  Meteor.conversations.find({
      _participants: Meteor.userId(),
    }).fetch();
    console.log(conversations);
 return (
      <div >
         Convos
     </div>
  );
}

I read from the official guide that the collection api is synchronous. When i open the browser console. I see multiple re-renders. At first, the console.log returns an empty array, but at subsequent renders, returns correctly. If the API was synchronous, shouldn’t this be a non empty array from the start? Am I missing something?

use https://guide.meteor.com/react.html#using-createContainer when dealing with reactive data (like collections)

Best read the whole guide carefully

1 Like

Synchronous means it runs in one tick and returns a result. The first result is that the data is not present yet, so that’s why you get an empty array!

1 Like

Are you saying that the relevant data is not loaded in the client-side mini mongo cache during the first render? I am using tracker react to load data and the subscription happens in the constructor itself.

constructor() {
    super();

    this.state = {
      subscription: {
        currentUserConversations: Meteor.subscribe('currentUserConversations'),
      },
    };
  }

Doesnt this mean that the subscription will happen before the render(even the first) itself?
Also can you suggest the best package for data loading? I chose tracker react over the react meteor data mixin because I read somewhere that mixins are on the way out in react. Thanks!

Have you tried the officially recommended higher order component from the Meteor Guide?

Anyway, blocking rendering in React is not a thing. You need to manage your own loading indicators by looking at the ready state of the subscription. There’s an example in the Guide.

1 Like