polymerfire icon indicating copy to clipboard operation
polymerfire copied to clipboard

Firebase-document Erratic Behaviour

Open igniparra opened this issue 7 years ago • 3 comments
trafficstars

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

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

igniparra avatar Mar 20 '18 16:03 igniparra

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?

merlinnot avatar Mar 20 '18 16:03 merlinnot

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 <Firebase-document> components? It's only one that gets its data from this tree branch:

image

Thanks!

igniparra avatar Mar 20 '18 17:03 igniparra

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?

tjmonsi avatar Mar 29 '18 03:03 tjmonsi