discussion: Document_added performance

I was discussing the following problem with a colleague today and I’m wondering if other have experience the same behavior.

We have a component that does a redux firestore query similar to this:

firestore().collection(‘whatever’).where(‘item_id’, ‘==’, ‘XX’).where(‘comment_id’, ‘==’, ‘YY’)

This query returns a small number of documents. Then in another component we have a query that does only: firestore().collection(‘whatever’).where(‘item_id’, ‘==’, ‘XX’)

Now firestore immediately returns the documents that we had with the first query and then a few miliseconds later we get a second snapshot with more data.

Redux firestore looks at the docChanges and triggers a document_added for every change.

Now the problem is that the query returns like 100+ documents. Our first query returned like 5, then the second one returns 100+ and we end up dispatching 100+ document_added events on the store. Needless to say -despite pure components our page freezes because we have a lot of connected components.

We managed to get around the problem by manually doing the query in componentDidMount and then dispatching a single listener_response. This way we only trigger 2 events. The first with 5 elements and the second with 100+. Now the page doesn’t freeze.

So this got we thinking about this here: https://github.com/prescottprue/redux-firestore/blob/master/src/utils/query.js#L672

So how about instead of dispatching that many document_added we loop over the changes and group them to added, updated, deleted and dispatch single actions with those. Obviously we need slightly different reducers to handle the array of changed documents, but this should be doable.

There is a comment in that file TODO: Option for dispatching multiple changes in single action so I guess that @prescottprue already thought about that?

[Wgil]

I’m facing this issue again but this time I have only one query on the same collection:

const query = {
        collection: Team.collection,
        doc: this.props.profile.teamId,
        subcollections: [{ collection: Entity.collection }],
        storeAs: Entity.collection
      }

I tried removing storeAs, using firestoreConnect and setListener without any luck. Not only DOCUMENT_ADDED action is dispatched but also DOCUMENT_MODIFIED.

[compojoom]

sorry for the slow response:

import { dataByIdSnapshot, orderedFromSnap, getQueryConfig, firestoreRef } from 'redux-firestore/src/utils/query'

const meta = getQueryConfig(getHarvestedCropsQuery(companyId, browsingGroup, myCompanyProfile, dateRange))
    this.unsubscribe = firestoreRef(this.props.firebase, meta)
      .onSnapshot((docData) => {

        this.props.dispatch({
          type: actionTypes.LISTENER_RESPONSE,
          meta,
          payload: {
            data: dataByIdSnapshot(docData),
            ordered: orderedFromSnap(docData),
          },
          merge: {
            docs: true,
            collections: true
          },
        })
      })

you obviously need to pass dispatch as prop to the component. The meta object is the query as you need it in your component