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

Collection returning null #1007

Closed snrajeev-github closed 3 years ago

snrajeev-github commented 3 years ago

Do you want to request a feature or report a bug?
Report a bug.

What is the current behavior? The package is returning null for my collection.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar. I have setup the react-redux-firebase and redux-firestore packages as per instructions, and can confirm that the requests are hitting my Firestore. I can also confirm that the security rules have been setup correctly, as Firebase is allowing the requests. I can also confirm that there are no errors logged to the console. However, the collection I am trying to access is returning a null. Here is my code.

const mapStateToProps = state => {
  console.log(state);
  return {
    accounts: state.firestore.accounts
  };
};

export default compose(
  connect(mapStateToProps),
  firestoreConnect([
    {
      collection: 'accounts',
      doc: 'test_user@email.com'
    }
  ])
)(MyComponent);

What is the expected behavior? The collections should be returned with data.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups? "react-redux-firebase": "^3.7.0", "redux-firestore": "^0.13.0",

Browser: Chrome, OS: Windows 10. It did not work in previous versions either.

prescottprue commented 3 years ago

It appears that you are querying for a document, not a collection. Also, are you sure that the document id is test_user@email.com.

Another thing is that it is usually more clear to have your state connection (connect) below firestoreConnect within your HOC tree since listeners are attached on mount of firestoreConnect.

Since this is an implementation question, you may get more complete responses on the Gitter channel

snrajeev-github commented 3 years ago

Thanks for the reply @prescottprue . After further investigation, I realized that the issue is due to the complex structure of my Firestore data. I am able to access the data successfully where the collections are simple do not have any sub-collections.

In my case, I have three levels of sub-collections, like so: /accounts/user2@email.com/bank/10003940

It is still returning a null, here is my firestoreConnect request:

export default compose(
  firestoreConnect([
    {
      collection: 'accounts',
      doc: 'user2@email.com',
      subcollections: [{ collection: 'bank', doc: '10003940' }],
      storeAs: 'user2@email.com-accounts-bank' // make sure to include this
    }
  ]),
  connect(mapStateToProps),
)(MyComponent);

Appreciate your help with this, thank you.

snrajeev-github commented 3 years ago

Thanks @prescottprue . I found the solution to this.

firestoreConnect([
    {
       collection: 'accounts',
       doc: 'user2@email.com',
       subcollections: [{ 
               collection: 'bank', 
               subcollections: [{
                     doc: '10003940'
                }] 
        }],
       storeAs: 'user2@email.com-accounts-bank' 
    }
  ]),

However, then I realized that I would need to iterate over all the items in the sub-collection, but the client SDK does not return the list of all items in the sub-collection apparently. I have resolved this issue by restructuring the data model, to just have a summary array of accounts directly in the document, and still keep the sub-collections. But read this sub-collection only if the user tries to drill down an account and wants to further view the data.

Many thanks to Greg Fenton at gitter who suggested the above solution.