I have a Meteor app with a React front end and FlowRouter and I’m having some issues with my subscriptions.
Let’s say I have a collection of leads and leads can be grouped by campaigns. If I subscribe to all leads on page A like so:
getMeteorData() {
const leadsSubHandle = Meteor.subscribe('leads', {limit: 50});
return {
leads: Collections.Leads.find({}, { sort: { createdAt: -1 } }).fetch(),
leadsLoading: ! leadsSubHandle.ready()
};
}
Then I can view them just fine using a ‘dumb’ component called LeadsList
which in turn renders LeadRow
for each lead.
I have another page that scopes the leads to a campaign. The subscriptions look like this:
getMeteorData() {
const campaignId = FlowRouter.current().params['id'];
const campaignHandle = Meteor.subscribe('campaignWithTemplate', campaignId);
const leadsHandle = Meteor.subscribe('leadsForCampaign', campaignId, {
limit: 50,
page: this.state.page
});
return {
currentUser: Meteor.user(),
campaign: Collections.Campaigns.findOne(),
template: Collections.Templates.findOne(),
leads: Collections.Leads.find().fetch(),
loading: ! campaignHandle.ready(),
leadsLoading: ! leadsHandle.ready()
};
}
This data then gets rendered using the same dumb LeadsList
and LeadsRow
components as before. However, the subscription on this second page only works if I do a full reload of the page (i.e. CMD+R). If I hit the page via a FlowRouter link, the subscription doesn’t get updated to only the leads for the campaign. I can see from logging the prop passed to LeadsList
that almost all the leads are still there.
So I feel like I should be checking to see when my first component becomes unmounted and unsubscribe to all the leads there so that when the ‘resubscribe’ happens it’s ‘clean’. That seems a bit unintuitive though. Should that happen automatically?
Any help appreciated!