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

Question

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

• my-app.html contains a configured <firebase-app> component.
• my-models.html (which is a page configured in my-app.html routes) contains a <add-model> component
• <add-model> is a form with a <firebase-query>, <firebase-auth>, input, and submit button.

• I attempt to push data using <firebase-query> with the following function in the add-model.html Polymer object:

  Polymer({
      is: 'add-model',
      properties: {
          data: {
              type: Object
          }
      },
      create: function() {
         this.$.query.ref.push({
             name: this.$.myModelName.value
          });
      }
  });
  

  Outcome

• Calling push on the <firebase-query> object in add-model.html returns Cannot read property 'push' of undefined (explained in this Q/A, in our case it's because <firebase-app> does not appear to be properly declared).

• Moving <firebase-app> from my-app.html to add-model.html file does make the push function work, but then my-app.html loses its Firebase functionality.
• Calling <firebase-app> in both my-app.html and add-model.html returns Uncaught Error: Firebase App named 'firebase-app' already exists.
• <firebase-auth> does work in add-model.html and returns a [[user]] object.

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

Answer 1

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