Using firestore mixin branch - dom-repeat data not reflecting update

[halloweenman]

Description

I'm new to Polymer and Firestore mixin so apologies if I am not doing anything correctly.

I have declared my custom element property:

dbsections: {
            type: Array,
            collection: '/users/{user.uid}/sections',
            query: (q, el) => {
              q = q.orderBy('sectionsort', 'asc').limit(30)
              return q;
            }
          }

I have a dom-repeat using the dbsections collection:

<template is="dom-repeat" items="[[dbsections]]" as="mysection" index-as="sectionindex">
[[mysection.sectiontitle]]
 </template>

I am updating a document contained in the dbsections collection:

var db = firebase.firestore();

          db.collection("users").doc(this.user.uid).collection("sections").doc(this.sectionid).update({ sectiontitle: this.sectiontitle })
            .then(() => {
              console.info("update successful"); //works fine but not reflected in dom-repeat
            })
            .catch(function (error) {
              console.error("Error: ", error);
            });

The update works fine (the data is actually updated successfully in the remote Firestore database) but the data update is not reflected in the dom-repeat. I was expecting the updated data to be displayed in the dom-repeat.

Expected outcome

dom-repeat to display updated data.

Actual outcome

dom-repeat does not change and reflect updated data.

[Westbrook]

If you want your data to update automatically over the lifecycle of your app you need to add live: true as metadata to the property that you are binding to your firestore.

dbsections: {
            type: Array,
            live: true,
            collection: '/users/{user.uid}/sections',
            query: (q, el) => {
              q = q.orderBy('sectionsort', 'asc').limit(30)
              return q;
            }
          }

[halloweenman]

Thanks, that worked. I'm guessing this is the best method of achieving what I want? I considered updating dbsections manually using this.set('dbsections.' + this.index + '.sectiontitle', this.sectiontitle); but seemed a little nonsensical with a risk of the dom-repeat array becoming out of synch with the actual remote Firestore db.

Is it best practise also to sort using the query: ... orderBy rather than using a sort function of the dom-repeat?

[Westbrook]

That is currently the approach I use, so I'd like to thank it's the best. 😅The only difference beyond that is I use the supplied reference helper:

this.dbsectionsRef.doc(this.sectionid).update({ sectiontitle: this.sectiontitle })

instead of:

var db = firebase.firestore();
db.collection("users").doc(this.user.uid).collection("sections").doc(this.sectionid).update({ sectiontitle: this.sectiontitle })

Makes coming back to it a little bit easier...

[halloweenman]

Thanks again, and for the Ref headsup!

Still wondering if it is best practise also to sort using the query: ... orderBy rather than using a sort function of the dom-repeat?

[Westbrook]

orderBy and limit happen during the request, so you'll be able to move processing during your first render out to the server, so I'd definitely go that way. That's not to say it's always the best bet, but being you're using limit I'd think that orderBy rather than sorting the dom-repeat will be more likely to give you the results you are expecting 100% of the time.

[halloweenman]

Many thanks 👍