FirebaseExtended / polymerfire

Polymer Web Components for Firebase
https://www.webcomponents.org/element/firebase/polymerfire
MIT License
459 stars 142 forks source link

Firebase-document Erratic Behaviour #336

Open igniparra opened 6 years ago

igniparra commented 6 years ago

Description

Using Firebase-Document not always works. I'm not sure how to debug it, and I don't get any errors, but the queried values sometimes get downloaded, sometimes don't, and I can't find why.

Steps to reproduce

Please refer to the source code located on https://github.com/igniparra/notasdai. I have 4 components that use Firebase-document to populate a dropdown menu, three of them work ok, but the other one, sometimes works, other doesn't, sometimes it takes for me to swap between the components for it to refresh.

Any tips or assistance would be HIGHLY appreciated!

Thanks!

Browsers Affected

merlinnot commented 6 years ago

Can you share a code snippet? I've came across similar issue when I tried to use separate docs for each value in the dropdown. Is that your use case?

igniparra commented 6 years ago

I didn't know how much code to paste, that's why I uploaded the project to github.

I guess this should be enough, but let me know what else I can show you.

`

<firebase-app
  name="notasdai"
  auth-domain="notasdai.firebaseapp.com"
  database-url="https://notasdai.firebaseio.com"
  api-key=""
  storage-bucket="notasdai.appspot.com"
  messaging-sender-id="">
</firebase-app>

  <div class="card">
    <div class="layout horizontal layout-start">
      <h1>Proyecto de Auditoría</h1>
      <firebase-document
        path="/proyectos"
        data="{{auditorias}}">
      </firebase-document>
      <paper-dropdown-menu class="dropdown">
        <paper-listbox slot="dropdown-content" selected={{auditoria}} attr-for-selected="name">
          <dom-repeat items="{{_toArray(auditorias)}}">
            <template>
              <paper-item name={{item.val}}>{{item.val}}</paper-item>
            </template>
          </dom-repeat>
        </paper-listbox>
      </paper-dropdown-menu>
    </div>
  </div>`

With separate docs you mean different components? It's only one that gets its data from this tree branch:

image

Thanks!

tjmonsi commented 6 years ago

This can be hack I guess but can you try adding this?

...
<dom-repeat items="{{_toArray(auditorias)}}" id="auditorias-array">
  ...
</dom-repeat>
...
static get properties () {
  return {
     ...
     auditorias: {
       type: Object
     }
  }
}

static get observers () {
  '_updateArray(auditorias.*)'
}

_updateArray () {
  document.querySelector('#auditorias-array').render();
}

It might be because of the dom-repeat not firing render of the elements?