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

[BUG] After update to collection, firestore.data.[collection_name] only contains the new document and is improperly formatted unless storeAs is used. #1219

Open jakechao-zeal opened 1 year ago

jakechao-zeal commented 1 year ago

What is the current behavior?

My overall question is: why do we need to use storeAs for collection queries that we want stored underneath the path of the query in order for state.firestore.data to function properly?

For my app, my team has been using useFirestoreConnect to store a collection groups into redux and then fetching that state from redux as follows. The below was working perfectly fine until 5/2/2023. I did not change anything in my package.json and simply was reinstalling packages via npm install. Before this, I did not need to use storeAs but after the npm install, I am required to use storeAs if I want to be able to use firestore.data properly.

 useFirestoreConnect(['groups']);

const groups = useSelector((state: State) => state.firestore.data.groups);
const orderedGroups = useSelector((state: State) => state.firestore.ordered.groups); // for sake of example

On app load, groups and orderedGroups appear as intended, but as soon as any change is made to a document in the collection, state.firestore.data.groups returns an ill-formatted state that only contains the group that was more recently modified or added. See below for an example.


// on app load before new group document added, data is formatted properly. 

Result of state.firestore.data.groups {
  "ULPEKnuzFgyEqcF8sigf": {
    "maxSize": 12,
    "createdDateTime": {
      "seconds": 1683231329,
      "nanoseconds": 514000000
    },
    "isActive": true,
    "groupSize": "7-12",
    "name": "Agnes's Table Tennis Club",
    "id": "ULPEKnuzFgyEqcF8sigf",
    "path": "groups"
  }
}

// after app load when new group document added, data only contains the most recently added group but also in the wrong format

Result of state.firestore.data.groups {
  "id": "vJsibUUSFmJuS1tyCWr8",
  "path": "groups",
  "createdDateTime": {
    "seconds": 1683236416,
    "nanoseconds": 461000000
  },
  "isActive": true,
  "maxSize": 12,
  "name": "Agnes's Dancing Club",
  "groupSize": "7-12",
}

Using state.firestore.ordered.groups however returns the correct list of groups before and after a new group document is added.

What is the expected behavior?

When using

 useFirestoreConnect([{collection: 'groups', storeAs: "groups"}]);

const groups = useSelector((state: State) => state.firestore.data.groups);

the groups variable is the correct list of groups and format before and after a group document is added. See below for correct output as opposed to without storeAs.

Result of state.firestore.data.groups {
  "ULPEKnuzFgyEqcF8sigf": {
    "name": "Agnes's Table Tennis Club",
    "maxSize": 12,
    "groupSize": "7-12",
    "isActive": true,
    "createdDateTime": {
      "seconds": 1683231329,
      "nanoseconds": 514000000
    },
    "id": "ULPEKnuzFgyEqcF8sigf",
    "path": "groups"
  },
  "vJsibUUSFmJuS1tyCWr8": {
    "maxSize": 12,
    "name": "Agnes's Dancing Club",
    "createdDateTime": {
      "seconds": 1683236416,
      "nanoseconds": 461000000
    },
    "groupSize": "7-12",
    "isActive": true,
    "id": "vJsibUUSFmJuS1tyCWr8",
    "path": "groups"
  }
}

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?

I am on version 3.11.0 and have not updated any dependencies to my knowledge.

emao commented 9 months ago

I too am seeing this all of a sudden. My version is 3.11.0. Same repro as @jakechao-zeal