CODEWITHSUNDEEP
meteor
rs77
rs77

Reputation: 8977

Sporadic behaviour with Session variables in Meteor

I've been scratching my head as to why this code will work some of the time, but not all (or at least most of the time). I've found that it actually does run displaying the correct content in the browser some of the time, but strangely there will be days when I'll come back to the same code, run the server (as per normal) and upon loading the page will receive an error in the console: TypeError: 'undefined' is not an object (evaluating 'Session.get('x').html')

(When I receive that error there will be times where the next line in the console will read Error - referring to the err object, and other times when it will read Object - referring the data object!?).

I'm obviously missing something about Session variables in Meteor and must be misusing them? I'm hoping someone with experience can point me in the right direction.

Thanks, in advance for any help!

Here's my dummy code:

/client/del.html
<head>
  <title>del</title>
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  Hello World!
  <div class="helloButton">{{{greeting}}}</div>
</template>

My client-side javascript file is:

/client/del.js
Meteor.call('foo', 300, function(err, data) {
  err ? console.log(err) : console.log(data);
  Session.set('x', data);
});

Template.hello.events = {
  'click div.helloButton' : function(evt) {
    if ( Session.get('x').answer.toString() === evt.target.innerHTML ) {
      console.log('yay!');
    }
  } 
};

Template.hello.greeting = function() {
  return Session.get('x').html;
};

And my server-side javascript is:

/server/svr.js
Meteor.methods({

  doubled: function(num) {
    return num * 2;
  },

  foo: function(lmt) {
    var count = lmt,
        result = {};

    for ( var i = 0; i < lmt; i++ ) {
        count++;
    }

    count = Meteor.call('doubled', count);

    result.html = "<em>" + count + "</em>";
    result.answer = count;
    return result;

  }

});

Upvotes: 2

Views: 3635

Answers (2)

Tamara Wijsman
Tamara Wijsman

Reputation: 12348

One of the seven principles of Meteor is:

Latency Compensation. On the client, use prefetching and model simulation to make it look like you have a zero-latency connection to the database.

Because there is latency, your client will first attempt to draw the lay-out according to the data it has at the moment your client connects. Then it will do the call and then it will update according to the call. Sometimes the call might be able to respond fast enough to be drawn at the same time.

As now there is a chance for the variable to not be set, it would throw an exception in that occasion and thus break down execution (as the functions in the call stack will not continue to run).

There are two possible solutions to this:

  1. Check that the variable is set when using it.

    return Session.get('x') ? Session.get('x').html : '';

  2. Make sure the variable has an initial value by setting it at the top of the script.

    Session.set('x', { html = '', answer = ''});

Another approach would be to add the templates once the call responds.

Meteor.call('foo', 300, function(err, data) {
    Session.set('x', data);
    $('#page').html(Meteor.ui.render(function() {
        return Template.someName();
    }));
});

Upvotes: 1

Tom Coleman
Tom Coleman

Reputation: 3037

I think it's just that the session variable won't be set yet when the client first starts up. So Session.get('x') will return undefined until your method call (foo) returns, which almost certainly won't happen before the template first draws.

However after that it will be in the session, so things will probably behave right once you refresh.

The answer is to just check if it's undefined before trying to access the variable. For example:

Template.hello.greeting = function() {
  if (Session.get('x')) return Session.get('x').html;
};

Upvotes: 1

Related Questions