Waiting for meteor collection to finish before next step

Question

I have a Meteor template that should be displaying some data.

Template.svg_template.rendered = function () {
  dataset_collection = Pushups.find({},{fields: { date:1, data:1 }}, {sort: {date: -1}}).fetch();

  a = moment(dataset_collection[0].date, "YYYY/M/D");
  //more code follows that is also dependent on the collection being completely loaded
};

Sometimes it works, sometimes I get this error:

Exception from Deps afterFlush function: TypeError: Cannot read property 'date' of undefined

I'm not using Deps in any context. As I understand it, the collection is being referenced before it is completely finished loading.

I therefore would like to figure out how to simply say "wait until the collection is found before moving on." Should be straightforward, but can't find an updated solution.

Answer 1

You are right, you should ensure that code depending on fetching the content of a client-side subscribed collection is executed AFTER the data is properly loaded.

You can achieve this using a new pattern introduced in Meteor 1.0.4 : https://docs.meteor.com/#/full/Blaze-TemplateInstance-subscribe

client/views/svg/svg.js

Template.outer.onCreated(function(){
  // subscribe to the publication responsible for sending the Pushups
  // documents down to the client
  this.subscribe("pushupsPub");
});

client/views/svg/svg.html

<template name="outer">
  {{#if Template.subscriptionsReady}}
    {{> svgTemplate}}
  {{else}}
    Loading...
  {{/if}}
</template>

In the Spacebars template declaration, we use an encapsulating outer template to handle the template level subscription pattern. We subscribe to the publication in the onCreated lifecycle event, and we use the special reactive helper Template.subscriptionsReady to only render the svgTemplate once the subscription is ready (data is available in the browser). At this point, we can safely query the Pushups collection in the svgTemplate onRendered lifecycle event because we made sure data made its way to the client :

Template.svgTemplate.onRendered(function(){
  console.log(Pushups.find().fetch());
});

Alternatively, you could use the iron:router (https://github.com/iron-meteor/iron-router), which provides another design pattern to achieve this common Meteor related issue, moving subscription handling at the route level instead of template level.

Add the package to your project :

meteor add iron:router

lib/router.js

Router.route("/svg", {
  name: "svg",
  template: "svgTemplate",
  waitOn: function(){
    // waitOn makes sure that this publication is ready before rendering your template
    return Meteor.subscribe("publication");
  },
  data: function(){
    // this will be used as the current data context in your template
    return Pushups.find(/*...*/);
  }
});

Using this simple piece of code you'll get what you want plus a lot of added functionalities. You can have a look at the Iron Router guide which explains in great details these features.

https://github.com/iron-meteor/iron-router/blob/devel/Guide.md

EDIT 18/3/2015 : reworked the answer because it contained outdated material and still received upvotes nonetheless.

Answer 2

This is one of those problems that I really wish the basic meteor documentation addressed directly. It's confusing because:

1. You did the correct thing according to the API.
2. You get errors for Deps which doesn't point you to the root issue.

So as you have already figured out, your data isn't ready when the template gets rendered. What's the easiest solution? Assume that the data may not be ready. The examples do a lot of this. From leaderboard.js:

Template.leaderboard.selected_name = function () {
    var player = Players.findOne(Session.get("selected_player"));
    return player && player.name;
};

Only if player is actually found, will player.name be accessed. In coffeescript you can use soaks to accomplish the same thing.

saimeunt's suggestion of iron-router's waitOn is good for this particular use case, but be aware you are very likely to run into situations in your app where the data just doesn't exist in the database, or the property you want doesn't exist on the fetched object.

The unfortunate reality is that a bit of defensive programming is necessary in many of these cases.