React Meteor Open Source Feed Example App

announce
1

I just released an open source React app using a Meteor backend. There’s some things i’d like to add like a more ‘Relay’ type of child data fetching.

I’d love to hear feedback and have a few people test it out! :smile:

https://github.com/AdamBrodzinski/react-ive-meteor


Data Flow
reactive-meteor-data2.jpg841×519

4 Likes
2

Just pushed an update to fix a bug with subscribing to more posts. Should have written tests! :wink:

3

This is awesome! I was just about to try and develop something similar. I’ll re-use, and hopefully contribute a little! (I will, of course, share results).

Cheers @SkinnyGeek1010 :smile:

1 Like
4

@idoivri Hey thanks!

Next up i’m working on making a pattern to subscribe to data so that you can use the subscription caching packages (and to make it more simple). I don’t think the upcoming MDG react has DDP subscription handling (unless it’s just not build yet). Currently subscribing with the mixin inside of the template triggers a lot of re-renders (on virtual dom), I think making a central SubscriptionManager would reduce that.

Here’s a concept of what this would look like (way more simple than the current one)

Parent Container Component


FeedData = React.createClass({
  componentWillMount() {
    // TODO this.state.postIds
    MeteorRelay.subscribeTo('feed', {initialLimit: 5});
  },

  incrementLimit() {
    MeteorRelay.increaseLimit('feed', 5);
  },

  // track changes in MiniMongo data store and merge with this.state
  getMeteorState() {
    return {
      postItems: Posts.find({}, {sort: {createdAt: -1}}).fetch() || [],
      allComments: PostComments.find().fetch(),
      postIds: Posts.find({}, {fields: {_id: 1}}).map(doc => doc._id)
    };
  },

  render() {
    return <FeedList incrementLimit={this.incrementLimit} postItems={this.state.postItems} />;
  }
});

Feed Item Child

FeedItemHeader = React.createClass({
  fieldsNeeded: {
    feed: {
      posts: { userName: 1, createdAt: 1 }
    }
  },

  render() {
    return (
      <div className='name-date'>
        <div className="name">{this.props.userName}</div>
        <div className="date">{this.props.createdAt}</div>
      </div>
    );
  }
});

// register fields needed before render
MeteorRelay.registerFields(FeedItemHeader);
1 Like