How can I retrieve data from Meteor collection on the client side with React?

Question

I'm trying to retrieve my server data of a collection with the code bellow, but it just return undefined.

 import { Posts } from '../../../api/posts.js'; class FeedUnit extends Component { constructor(props) { super(props); this.state = { open: true, emojis: false, isOver: false, likes: this.setLike(), }; } setLike(){ let self = this; let like; let post = Posts.findOne({ external_id: this.props.data.id }); console.log(Posts.findOne({})) return like; } 

I already search on the data base manually and there I had the correct return using the command:

 db.posts.findOne({external_id: '1402366059774445_1503319816345735'}) 

Answer 1

I found the solution in the comment of @mostafiz rahman, I should put the publish and subscribe , like this:

 if (Meteor.isServer) { // This code only runs on the server // This is necessary to reatrieve data on the client side Meteor.publish('posts', function tasksPublication() { return Posts.find(); }); } 

  componentDidMount() { Meteor.subscribe('posts'); } 

Answer 2

I think is a best solution that use some connector for Meteor/react. I prefer react-komposer .

U must just create function that allow react to track changes in Meteor collection:

function getTrackerLoader(reactiveMapper) {
  return (props, onData, env) => {
    let trackerCleanup = null;
    const handler = Tracker.nonreactive(() => {
      return Tracker.autorun(() => {
        // assign the custom clean-up function.
        trackerCleanup = reactiveMapper(props, onData, env);
      });
    });

    return () => {
      if(typeof trackerCleanup === 'function') trackerCleanup();
      return handler.stop();
    };
  };
}

And after that wrap component:

    import { Posts } from '../../../api/posts.js';

        class FeedUnit extends Component {

          constructor(props) {
              super(props);

              this.state = {
                  open: true,
                  emojis: false,
                  isOver: false,
                  likes: this.setLike(),
              };
          }

            setLike(){
              let self = this;
              let like;

              let post = this.props.post
              console.log(post)
              return like;
          }
}
function reactiveMapper(props, onData) {
    if (Meteor.subscribe('posts').ready()) {
        let post = Posts.findOne({ external_id: props.data.id });
        onData(null, { post });
    }
}

export default compose(getTrackerLoader(reactiveMapper))(FeedUnit);

For more information look the docs .

Answer 3

Posts.findOne is async function you need either to get data from callback or by promise as below 
 Posts.findOne({ external_id: this.props.data.id })
.then((posts)=>{
//do whatever you want
})
.catch(err=>console.log(err))