React-redux-firebase: isLoaded may not be working with firestore

[Floriferous]

When using the isLoaded helper with a subscription on firestore, it always returns true, not matter what I do.

Could it be that isLoaded does not work with firestore?

[prescottprue]

I am using it in a few projects including the Fireadmin project list page which uses a spinnerWhileLoading HOC that leverages isLoaded and it seems to be functioning as expected.

Could you post your use case including the connect calls? Maybe it isn't working correctly in your case?

[prescottprue]

@Floriferous Bump. Did you have examples of where isLoaded was not working for you as expected? What version of redux-firestore are you using?

[Floriferous]

Will try to prepare a reproduction this weekend, thanks for following-up!

[prescottprue]

@Floriferous were you able to prepare a repro? Hoping to understand the use case where things aren't working as expected.

[prescottprue]

Going to close since reproduction steps were not provided. @Floriferous reach out if you are able to repro.

[eleventhaus]

Having a similar issue where isLoaded returns true before firestore.data or firestore.ordered have loaded.

`` firestoreConnect(props => [{ collection:petParents/${props.profile.ppid}/pets`,
storeAs: "pets" }]),
connect(state => ({
pets: state.firestore.ordered.pets <---------------------- results in undefined error
})),
connect((state, props) => ({
initialValues: {
contactInfo: {...state.firebase.profile.contactInfo},
vetInfo: {...state.firebase.profile.vetInfo},
pets: [...state.firestore.data.pets], <---------------------- results in undefined error
emergencyContacts: [...state.firebase.profile.emergencyContacts]
}
}))
````

Looking at redux devtools,

isLoaded is false at @@reactReduxFirebase/LOGIN

and then set to true at @@reactReduxFirebase/SET_PROFILE

Meanwhile, isLoaded is true at @@reduxFirestore/SET_LISTENER despite no data loading in firestore

and remains true after Firestore finally loads at @@reduxFirestore/LISTENER_RESPONSE

[prescottprue]

@eleventhaus It is undefined before it exists, so you need to make use of isEmpty as well as isLoaded if you are doing things that way in your connect. I believe error is coming from you attempting to spread undefined.

It isundefined before loading then defined if it does exist, and null if it does not.

[eleventhaus]

I might be using isEmpty incorrectly but isEmpty remains false regardless of whether the firestore data is empty.

In my previous reply, at SET_LISTENER, isEmpty is false but there is no data in firestore.

I get undefined up until the LISTENER_RESPONSE action is called by firestore.

It seems like isLoaded and isEmpty aren't related to firestore but maybe I'm just not using them correctly.

[eleventhaus]

Could it be because I'm using storeAs as in issue #585 ?

[eleventhaus]

@prescottprue I've tried using firestoreConnect and isLoaded/isEmpty with and without storeAs but no combination seems to load data from firestore into props.

I continue to get undefined up until the LISTENER_RESPONSE action is called by firestore.

[eleventhaus]

Hey @prescottprue its been a few months and I returned to this same issue. Can you help?

Why is firestore data/ordered undefined up until the LISTENER_RESPONSE action is called by firestore? It's throwing everything off for me.

Can I get a component to reload after LISTEN_RESPONSE is called?

[prescottprue]

That is intentional so that a difference can be told between not loaded (undefined), loaded but empty (null) -> and loaded and existing (a value). isLoaded and isEmpty helpers are provided to check for these cases, but these are meant to be used within components, not in the connect function.

You get a component to reload by passing the value as a prop from state (through connect) or through a hook doing the same (useSelector). The simple complete app example shows doing just this with useSelector, and isLoaded. There is also an example using connect in the docs under HOCs.

Not sure I understand what is unexpected

[eleventhaus]

when isLoaded is true and isEmpty is false, firebase has loaded but firestore has not loaded, per the screenshots in my post above.

Why is isLoaded true if firestore still hasn't received data?

[prescottprue]

@eleventhaus For the case and code you listed above, it doesn't look like you have isLoaded or isEmpty in there to check? You should also be able to provide initialValues in the same connect as your first state connection - also the error you are showing in your screen shot appears to be because you are trying to spread that value when it won't exist on initial render.

Can you open up a new issue with a full reproduction of what you are describing with codesandbox or a similar tool? It will be easier to show how code should change if there is more to reference

[seanenriquez]

Hey, was wondering why firestore queries don't have the same isEmptyand isLoaded property provided on them like a firebase auth profile does. I see that they have different states, undefined, null, and value while working pretty well with the helper functions but think it would be more clear with the properties on the state.

Or maybe i'm missing a simple redux implementation.

[jaddoescad]

having similar issues

[prescottprue]

@seanenriquez I think you are going down the right path with the isEmpty isLoaded - those are on auth/profile.

With null it should work, but could anyone that is having an issue with some specific data not loading correctly open a new issue with full code and reproduction steps?