Race condition in firebase-query

[phrohdoh]

Description

firebase-query doesn't fetch data as expected.

Please see https://github.com/Phrohdoh/polymerfire-rant/pull/1

Steps to reproduce

Add firebase-app to your main element and firebase-query to a child element.

Browsers Affected

I only tested Chrome and Firefox:

• [X] Chrome
• [X] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[tjmonsi]

The way i fixed this was to import firebase-app-script.html and firebase-database-script.html along with firebase-app.html in the my-app.html

Then firebase-query.html will work fine. Try it.

[phrohdoh]

@tjmonsi Did you read the referenced PR?

[tjmonsi]

Yes. When the firebase team decoupled the database, auth, storage and messaging from the app, they also decoupled the initialization process of those parts. That means if firebase-app already initialized without the firebase-database.html loaded, then firebase-query will not work. But if firebase-query somehow is loaded first before firebase-app, which has firebase-database-script.html included, then it works

[tjmonsi]

If you want, you can just add firebase.html along with firebase-app.html... Firebase.html loads all scripts... The only problem with doing so is that it adds an overhead if you are not going to use the others such as auth, storage and messaging.

[abdonrd]

@tjmonsi commented:

Yes. When the firebase team decoupled the database, auth, storage and messaging from the app, they also decoupled the initialization process of those parts. That means if firebase-app already initialized without the firebase-database.html loaded, then firebase-query will not work. But if firebase-query somehow is loaded first before firebase-app, which has firebase-database-script.html included, then it works

Then... Firebase decoupled needs to be fixed, right?

[tjmonsi]

@abdonrd Yes and no (I think). Yes, because it creates a lot of confusion. No, because just think about it, why initialize storage when you don't need storage initialization in the first place. The reason for the decoupling is to save KB and bandwidth, impacting performance.

For me, the decoupling made a lot of sense when it comes to performance, and adding a few lines more of code to add the necessary scripts (firebase-auth-script.html for firbease-auth and auth related functions, firebase-database-script.html for firebase-document, firebase-query, and database related functions, firebase-storage-script for storage funcitons, and firebase-message-script.html for messaging functions) and not just firebase-app.html is ok with me... But that's just me. :smile:

[phrohdoh]

At the very least this should absolutely be documented (possibly along side a fully-fledged working example, not just the element's default property values).

[tjmonsi]

@Phrohdoh yeah I do agree. I'll try to think of a way to make a PR for the documentation but I would like to ask @mbleigh as well on what's best to where to put at (would it be on the README.md or in firebase-app.html or both)

[andrewspy]

~~Why not just import firebase-database-script.html in both firebase-document.html/firebase-query.html so that user can just import firebase-document.html/firebase-query.html without worrying about the inner workings of polymerfire (i.e. manually import firebase-database-script.html when polymerfire is decoupled).~~

It doesn't work, please ignore.

[tjmonsi]

firebase-query.html already imports firebase-database-script.html via the firebase-database-behavior.html (which is loaded by firebase-document as well)

Again, if firebase-app is loaded in the app-shell and was initialized first before loading firebase-database-script via firebase-query (which is usually lazy loaded in the pages), then this will not work.

On Wed, 22 Feb 2017 14:49 andrewspy, [email protected] wrote:

Why not just import firebase-database-script.html in both firebase-document.html/firebase-query.html so that user can just import firebase-document.html/firebase-query.html without worrying about the inner workings of polymerfire (i.e. manually import firebase-database-script.html when polymerfire is decoupled).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/firebase/polymerfire/issues/179#issuecomment-281584824, or mute the thread https://github.com/notifications/unsubscribe-auth/AChe1oXGJ7dnfe-t_05U-fALV4iGMt49ks5re9qFgaJpZM4L-Lmt .

[bennypowers]

in my-app.html I have

<link rel="import" href="../bower_components/polymerfire/firebase.html">
<link rel="import" href="../bower_components/polymerfire/firebase-query.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../bower_components/polymerfire/firebase-document.html">
<link rel="import" href="../bower_components/polymerfire/firebase-app.html">

Now, checking network panel, I see this:

So how do I ensure scripts load in the right order?