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!
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!
Just pushed an update to fix a bug with subscribing to more posts. Should have written tests!
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
@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)
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} />;
}
});
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);