Search code examples
javascriptfirebasefirebase-realtime-databasepolymerpolymerfire

No data returned using polymefire firebase-query element

I'm creating a dom-module to display my firebase data in a div. I followed along with the Polycast video at https://www.youtube.com/watch?v=9AHDSGitDP0&t=639s but the firebase-query component is not pulling in the data. No data appears in the console other than my signed in user data and there are no errors. I saw that other people had issues pulling in data with polymerfire and I tried the solution here but no luck: Polymer + Firebase (Polymerfire): <firebase-query> not working inside single page app view (with <firebase-app> located in my-app.html)

Could someone help with this?

In my main html page I have the following:

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheets/style.css">
    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/polymerfire/polymerfire.html">
    <link rel="import" href="../bower_components/polymerfire/firebase-app.html">
    <link rel="import" href="../bower_components/polymerfire/firebase-database-script.html"> 
    <link rel="import" href="../bower_components/webcomponentsjs/webcomponents-lite.js">
    <link rel="import" href="elements/browse-events.html"> <!-- my custom component -->
</head>

<body>
            <firebase-app
                api-key=""
                auth-domain=""
                database-url=""
                project-id=""
                storage-bucket=""
                messaging-sender-id="">
            </firebase-app>

            <!-- my custom component -->
            <browse-events></browse-events>

</body>

Here's the code in my component's file (browse-events.html)

<!-- dependencies -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-database-script.html">
<link rel="import" href="../bower_components/polymerfire/firebase-database-behavior.html">
<link rel="import" href="../bower_components/polymerfire/firebase-query.html">

<dom-module id="browse-events"> 
    <template>
        <firebase-query
                        id="query-all"
                        app-name="authtest-54513"
                        path="/events"
                        data="{{events}}">
        </firebase-query>

        <template is="dom-repeat" items="[[events]]" as="event">
            <div> 
                <h1>[[event.title]]</h1>
            </div>
        </template>
    </template>

    <script>
        Polymer({
            is:'browse-events',
            properties: {
                events: {
                    type: Object
                }
            }
        });
    </script>
</dom-module>
Solution

  • If you use app-name in firebase-query you need to specify the name in firebase-app. If you only use one firebase-app in your app you can leave out the name in firebase-app and the app-name in your other polymerfire elements.

    Property events is likely an Array instead of an Object:

    If the child nodes of the query are objects (most cases), data will be an array of those objects with an extra $key field added to represent the key. If the child nodes are non-object leaf values, data will be an array of objects of the structure {$key: key, $val: val}. https://github.com/firebase/polymerfire/blob/master/firebase-query.html

    On a side note: You only need to import firebase-query inside your browse-events element. Firebase-query will import the scripts it needs to run itself. (same for firebase-app in you main html page)