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 inmy-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 theadd-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 inadd-model.html
returnsCannot 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>
frommy-app.html
toadd-model.html
file does make thepush
function work, but thenmy-app.html
loses its Firebase functionality. - Calling
<firebase-app>
in both my-app.html and add-model.html returnsUncaught Error: Firebase App named 'firebase-app' already exists.
<firebase-auth>
does work inadd-model.html
and returns a[[user]]
object.
How do I make firebase-query
properly communicate with firebase-app
from my route?
For me the key was to declare
firebase-app
before declaring the rest of the WebComponents that hadfirebase-query
orfirebase-document
inside. During debugging I realized that the firebase properties of the child WebComponents were set before they were declared in thefirebase-app
element itself.This is the order that worked for me:
And all the elements that use
query
ordocument
should come only after this:I found the above answer to import polymerfire/polymerfire.html right on the money. Additionally I would add that my particular app was very very fussy about exactly where every import and firebase element was located. Most of the polycasts (such as #58 referenced above) seem quite straightforward and easy to get right. This particular one took a lot of experimentation with where the elements and imports were located, due to scoping or visibility or other issues that I never figured out.
Hope this helps someone else in the same situation I was in.
I'd also bet that a visitor in 2018 or later would find this post obsolete, because it would seem likely to be improved by then.
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 importspolymerfire/firebase-app.html
(and no other imports from Polymerfire); andmy-models.html
probably imports onlypolymerfire/firebase-query.html
andpolymerfire/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, includingPolymer.FirebaseCommonBehavior
, which defines theapp
property seen in all Polymerfire elements. I'm guessing the Firebase SDK requires all Polymerfire elements imported beforeapp
initialization in order to populate theapp
object appropriately. Otherwise, whenfirebase-query
initializes,app.database
will be undefined, which prevents itsref
property from initializing, leading to runtime errors when you try to use the methods of the Polymerfire elements. In the case ofthis.$.query.ref.push(...)
, the error seen would be: