prescottprue / react-redux-firebase

Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
https://react-redux-firebase.com
MIT License
2.55k stars 559 forks source link

isLoaded not working as expected (with subcollections & storeAs) #1048

Closed TrySpace closed 3 years ago

TrySpace commented 3 years ago

bug v 3.8.1

What is the current behavior?

I'm having a similar issue where I have a route where I'm loading a subcollection, however, when the id changes, isLoaded doesn't work as intended, because it will return 'true' because there is an ol 'subList' already loaded. While in the meantime it is loading the new one and replacing it.

So what happens when changing routes, you see the old 'subList' shortly before it is replaced by the new fetched list.

isEmpty is also not useful here, because it is not empty when/before/after I navigate.


const subListQuery = {
    collection: type,
    doc: id,
    subcollections: [
      { collection: type }
    ],
    storeAs: 'subList'
  }  

useFirestoreConnect(() => [subListQuery])

const subList = useSelector(({ firestore: { data } }) => data.subList)

Render:


 <div>
      {
        isLoaded(subList) && !isEmpty(subList)?
          map(subList, (item, i) => {
            return (
              <div key={i}>
                <div>{item && item.title}</div>
              </div>
            )
          }) 
          :             
          <div>Loading</div>
      }
    </div>

I basically makes sense that this is not working as it should/does with other refs, since the subcollection subList is not empty, and is technically loaded.

I have also tried selecting the status directly with: const requested = useSelector(({ firestore: { data } }) => data.status && data.status.requested && data.status.requested.subLists) But that gives me false for some reason, while the devtools says true... So maybe that selector is one behind without triggering a re-render..

What I expected? isLoaded to use the data in status to accurately check if the selector I use is loaded? Idk maybe that's not realistic

What I've done now is do: storeAs: 'subList/${id}' so I have a unique store for the subcollection...