Meteor findOne with React and createContainer

1

Hi meteorite,

I would like display my Article component with React, but my Post.findOne() return undefined, and i don’t understand why :

class Article extends Component {

  render() {
    console.log(this.props);
    return (
      <h1>{this.props.match.params.slug}</h1>
    );
  }

}

Article.protoTypes = {
  post: React.PropTypes.object,
  loading: React.PropTypes.bool
}

ArticleContainer = createContainer(({ slug }) => {
  const postHandle = Meteor.subscribe('post');
  const post = Post.findOne({
    'slug': "super-test"
  });
  const loading = !postHandle.ready();

  return {
    loading,
    post
  };
}, Article);

export default ArticleContainer;

the console.log return this :

Object { match: Object, location: Object, history: Object, staticContext: undefined, loading: true, post: undefined } app.js:392:7

Object { match: Object, location: Object, history: Object, staticContext: undefined, loading: true, post: Object } app.js:392:7

My route :

<AppLayout path='/blog/:slug' component={ArticleContainer} />

Someone would have an idea of where I might have made a mistake ?

Thank you community !

2

Try putting your console.log in the container to see if a valid result ever returns. It may be that your subscription hasn’t loaded the results yet and you need your loading boolean to be true before seeing results.

3

Hi @townmulti

I’ve try replace slug: slug to slug: “my-test” (URL existe) and it work.

But, on load page, the first console return post object undefined, ans after 1-2s, my data.

I think my problem is on my route, maybe the params is not passing to ArticleContainer ?

My publish method

const Post = new Mongo.Collection('post');

if (Meteor.isServer) {

  // This code only runs on the server
  Meteor.publish('post', function postPublication() {
    return Post.find();
  });

}

Meteor.methods({

I’ve try to place console.log in ArticleContainer, and slug is undefined :frowning:

4

Did you see this forum topic, it sounds similar:

5

findOne will always return undefined first, if the subscription is not ready yet.

You should handle that in the container or in the component to avoid accessing properties of undefined (which will thrown an error)

2 Likes