Trying to use FlowRouter in app; getting broken page rendering

I’m writing a Meteor app and need some simple client-side routing. FlowRouter looks perfect from the docs and GitHub readme. It works exactly like I expect it to when I load my app starting from its root ("/"). However, when I try to navigate a new tab directly into the app (e.g. “/compose/article/123anID”), the page rendering is all broken. Console debugging reveals that template helpers and the template onRendered function are being run before mongo database access is available (e.g. FlowRouter.getParam(‘articleid’) logs the correct ID value, but Articles.findOne({_id: FlowRouter.getParam(‘articleid’)}) logs undefined, even though I can rerun the Articles.findOne call after the page has loaded poorly/incorrectly and get the article just fine).

This seems like a core/common use case, so how am I using FlowRouter incorrectly? What can I do to fix this?
Thanks.

Are you running insecure? Might you have forgotten to publish/subscribe?

You may also want to use a helper to make sure the subscriptions have been downloaded already prior to rendering the rest of the page. Example:

Helper:

ready: function () {
        return Template.instance().subscriptionsReady();
    },

On your template (assuming Blaze):

{{#if ready}}
    <put all of your elements reliant on database here>
{{else}}
    <loading page>
{{/if}}
1 Like

Thanks for the quick response.

I am not running insecure and I have not forgotten publish/subscribe (otherwise the app wouldn’t work correctly when loaded from root, nor return database results from console calls after the page has finished loading incorrectly).

I was unaware of subscriptionsReady() and so I’m going to investigate that.

Perfect, @Spyridon, thanks!

For anyone else with this question, Meteor.subscribe() is sufficient to get database info after the application is loaded, but that information is not guaranteed to be loaded into the browser/page at a particular moment. http://docs.meteor.com/api/templates.html#Blaze-TemplateInstance-subscribe has an example of how to use the template’s onCreated function to subscribe a template instance to database information, which then drives the results of Template.instance().subscriptionsReady().

1 Like