CODEWITHSUNDEEP
javascriptreactjsmeteor
Felipe Augusto
Felipe Augusto

Reputation: 8184

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

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'})

Upvotes: 1

Views: 109

Answers (3)

Anton Savchenko
Anton Savchenko

Reputation: 21

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.

Upvotes: 1

Felipe Augusto
Felipe Augusto

Reputation: 8184

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');
  }

Upvotes: 1

Fadi Abo Msalam
Fadi Abo Msalam

Reputation: 7187

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))

Upvotes: 0

Related Questions