CODEWITHSUNDEEP
mongodbreactjsmeteor
Humberto Cruz
Humberto Cruz

Reputation: 21

Meteor subscription ready

I'am building a react/meteor app. I'm having a problem with subscriptions. There's a component that is showed when the subscriotion.ready() is false. When it's turned to true the component is replaced by a table with data, but it takes a few seconds between the ready and the data from find().fetch(), showing another component for a while.

Any suggestion ?

Thanks

Upvotes: 0

Views: 254

Answers (1)

Mostafiz Rahman
Mostafiz Rahman

Reputation: 8562

If you are using react-meteor-data you can get the subscription status in ready property. Then you can send this property to the presentation component and update it accordingly.

Sample code snippet from the package's documentation:

import { createContainer } from 'meteor/react-meteor-data';

export default PresenterContainer = createContainer(props => {
  // Do all your reactive data access in this method.
  // Note that this subscription will get cleaned up when your component is unmounted
  const handle = Meteor.subscribe('publication_name');

  return {
    isReady: ! handle.ready(),
    list: CollectionName.find().fetch(),
  };
}, PresenterComponent);

Explanation: The first argument to createContainer is a reactive function that will get re-run whenever its reactive inputs change.

The PresenterComponent component will receive {isReady, list} as props. So, you can render your component according to the status of isReady

Addition: Write your render method of the presenter component like this:

render(){
    if(!this.isReady) return <LoadingComponent/>
    else if(this.props.list.length() != 0) return <TableComponent/>
    else return <NoDataFoundComponent/>
}

Upvotes: 1

Related Questions