When the size of object of firestoreConnect is more than 3 and includes "where" ,it occurs error

Question

Is there another way to solve this problem.

When the size of object of firestoreConnect is more than 3 and includes "where" then it does not work and component goes blank. Unless the screen is reloaded or transited, the fetch result is shown.

As far as I see the console, the size of projects array is 0.

export default compose(
  connect(mapStateToProps),
  firestoreConnect([
    { collection : 'projects',
      limit :55,
      orderBy: ['createdAt', 'desc'], 
      where:["tags", "array-contains-any", ["stack"]] ,
    }])
)(Dashboard);

https://www.dropbox.com/s/feahktg87z0i11i/20221019_171555.mp4?dl=0

shinzo_abe, do let me know if the answer below was helpful. – Vaidehi Jamankar Oct 26 '22 at 12:13 — Vaidehi Jamankar, Oct 26 '22 at 12:13

score 0 · Accepted Answer · answered Oct 25 '22 at 11:25

The ordering of the compose function is important. You can try and use the firestoreConnect([...]) component to be the first parameter passed in, followed by connect(mapStateToProps).
It is now recommended to use Firestore hooks try useFirestoreConnect() from 'react-redux-firebase' and useSelector() from 'react-redux'. You may have a look at this Github link mentioning a similar implementation
These are a few example links with helpful workarounds for the issue related to mapstateprops and firestore connect. Check the useful documentation for Connect Mapstate

When the size of object of firestoreConnect is more than 3 and includes "where" ,it occurs error

1 Answers1