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
});
}
});
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).
<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.<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?
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