0

I want to fetch data from Firebase using polymerfire and somehow it doesn't work.

Firebase data

lol-project (a name with 5 randomized letters)
+- events
    +- (some random event id, which is auto-generated)
        +- name: "haha"
        +- desc: "hihi"
    +- (some random event id, which is auto-generated)
        +- name: "huhu"
        +- desc: "hehe"

Code (Polymer v1.6, Polymerfire v0.10.2)

<link rel="import" href="../../../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../../bower_components/polymerfire/firebase-query.html">
...
<firebase-auth user="{{user}}"></firebase-auth>

<firebase-query id="eventquery" path="/events" data="{{events}}"></firebase-query>

<div class="Page-container" id="section1">
    <template is="dom-repeat" items="[[events]]" as="item">
        <p>[[item.name]]</p>
    </template>
</div>
...
properties: {
    events: {
        type: Object,
        observer: '_eventsChanged'
    }
},

_eventsChanged: function(newData, oldData) {
    console.log("it changed?!");
    console.info(newData);
}

Firebase rules

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

No error, no data. The console.info(newData); gives empty array. After hours of googling, I stumbled upon similar case, which apparently left unanswered in here (yes, this problem is pretty much similar to that one).

Anyone knows what I'm missing? Please help.

shihandrana
  • 220
  • 4
  • 16

1 Answers1

1

Few Things:

  1. events is an Array. See firebase-query: "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."
  2. No need to import polymerfire.html
  3. Are you sure you are logged in? You can propagate signed-in property in firebase-auth <firebase-auth user="{{user}}" signed-in="{{signedIn}}"></firebase-auth> and place User signedIn is {{signedIn}} just above your <div>.

You could also temporarily change your database security rules.

SamP
  • 36
  • 4
  • Hi there, 1. I changed my events type to Array. 2. Commented out `polymerfire.html` 3. I got `User signedIn is false`, which surprises me because I DID signed in and in the app shell on the top-right (`` -> `` -> `` , it shows my name and profile picture. I attempt to sign out and sign in again and it's still the same. I'm confused to be honest. – shihandrana Apr 02 '17 at 15:57
  • hi @SamP ! You're right, no. 3 is definitely the issue. I have 2 page: home.html and add.html. In both page, first loading page is always `signedIn = false` and when I navigate to another page, the second page is always `signedIn = true`. And if the 2nd page is my home.html (which is the page being questioned here), then everything works. Do you have any explanation or help about providing persistent auth in all page? Or i think I should ask new question in stackoverflow – shihandrana Apr 02 '17 at 18:13
  • It seems you're not creating elements, but just using basic html files (since the name of your files [doesn't contain a `-`](https://www.polymer-project.org/1.0/docs/devguide/registering-elements)). I think the propagation of the variables might therefore go wrong. I'd suggest watching some Rob Dodson video's: https://www.youtube.com/playlist?list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo Or reading about app architecture: https://www.polymer-project.org/1.0/docs/tools/polymer-cli Good luck! – SamP Apr 02 '17 at 19:20