firebasepolymerfirebase-realtime-databasepolymer-starter-kitpolymerfire

Polymer + Firebase (Polymerfire): <firebase-query> not working inside single page app view (with <firebase-app> located in my-app.html)


I'm trying to push data to Firebase using Polymerfire and the Polymer App Toolbox template:

How do I make firebase-query properly communicate with firebase-app from my route?


Solution

  • TLDR: The solution is to import polymerfire/polymerfire.html (even if not all elements used in that file) in the same file as your <firebase-app> declaration.


    Your my-app.html probably imports polymerfire/firebase-app.html (and no other imports from Polymerfire); and my-models.html probably imports only polymerfire/firebase-query.html and polymerfire/firebase-auth.html, assuming those are the only Polymerfire elements used in that file.

    I've identified the cause (but not necessarily the root cause). The symptoms are exhibited when polymerfire.html is not imported in the same file as the declaration of <firebase-app>.

    polymerfire.html imports all elements from Polymerfire, including Polymer.FirebaseCommonBehavior, which defines the app property seen in all Polymerfire elements. I'm guessing the Firebase SDK requires all Polymerfire elements imported before app initialization in order to populate the app object appropriately. Otherwise, when firebase-query initializes, app.database will be undefined, which prevents its ref property from initializing, leading to runtime errors when you try to use the methods of the Polymerfire elements. In the case of this.$.query.ref.push(...), the error seen would be:

    Uncaught TypeError: Cannot read property 'push' of undefined