Loaded data disappears when using orderBy

[olemaiwald]

Hello everyone,

I am encountering a rather interesting issue I have been trying to resolve on my own for a while now. Maybe somebody here can help me out. 🚀

For a newsfeed, I am querying posts from Firestore like this:

useEffect(() => {
    const subscriber = firestore()
      .collection("fl_content")
      .where("_fl_meta_.status", "==", "publish")
      .orderBy("createdAt", "desc")
      .onSnapshot((querySnapshot) => {
        const posts = [];
        if (querySnapshot) {
          querySnapshot.forEach((documentSnapshot) => {
            posts.push({
              ...documentSnapshot.data(),
              key: documentSnapshot.id,
            });
          });
        }
        setPosts(posts);
      });
  }, []);

When the useEffect Hook is executed, the data is actually loaded, but disappears after the fraction of a second.
When logging the size of the snapshots to console, the posts get pulled in correct order. However, right after that it pulls an empty querySnapshot, overwriting the received data from the request before. The useEffect Hook seems to get triggered twice.

When I remove the orderBy in the code above, everything is working as expected. But as I would like to display posts in my feed sorted after their creation date, this does not take me very far.

Versions I am using:

"dependencies": {
    "@invertase/react-native-apple-authentication": "^2.1.0",
    "@react-native-community/google-signin": "^5.0.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-firebase/app": "^11.2.0",
    "@react-native-firebase/auth": "^10.5.1",
    "@react-native-firebase/firestore": "^10.5.1",
    "@react-navigation/material-top-tabs": "^5.3.10",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "@reduxjs/toolkit": "^1.5.0",
    "expo": "~40.0.0",
    "expo-splash-screen": "~0.8.0",
    "expo-status-bar": "~1.0.3",
    "expo-updates": "~0.4.0",
    "firebase": "^8.2.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-apple-authentication": "^1.0.8",
    "react-native-elements": "^3.1.0",
    "react-native-emoji": "^1.8.0",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "~1.13.0",
    "react-native-render-html": "^5.1.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-sortable-list": "^0.0.24",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-tab-view": "^2.15.2",
    "react-native-unimodules": "~0.12.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "~0.13.12",
    "react-redux": "^7.2.2",
    "react-thunk": "^1.0.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  }

Currently developing on iOS

Any help would be greatly appreciated! 😄

[mikehardy]

@firebase/[email protected]
@firebase/[email protected]

These are not versions I am familiar with?

Also, this is nothing like + at the same time "rhymes" with this problem that turned out to be something about the way the code was executed, maybe rearranging the code would somehow affect it? #5093

[olemaiwald]

Hi, I've put all dependencies into the issue now, but I do not think the problem occurs because outdated stuff or incompatibilities.

My suspicion was, that it could have something to do with a missing index or so, like in #568 but creating an index on the createdAt did not help. I'll try to rearrange stuff once again. Maybe even try to sort after the data gets pulled in and working around the orderBy as everything works fine without it.

[mikehardy]

Do not mix and match versions! danger! https://invertase.io/blog/react-native-firebase-versioning

[olemaiwald]

Thanks for the heads-up!

Now my versions are looking like this.

"dependencies": {
    "@invertase/react-native-apple-authentication": "^2.1.2",
    "@react-native-community/google-signin": "^5.0.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-firebase/app": "^11.3.3",
    "@react-native-firebase/auth": "^11.3.3",
    "@react-native-firebase/firestore": "^11.3.3",
    "@react-navigation/material-top-tabs": "^5.3.10",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "@reduxjs/toolkit": "^1.5.0",
    "expo": "~40.0.0",
    "expo-splash-screen": "~0.8.0",
    "expo-status-bar": "~1.0.3",
    "expo-updates": "~0.4.0",
    "firebase": "^8.2.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-apple-authentication": "^1.0.8",
    "react-native-elements": "^3.1.0",
    "react-native-emoji": "^1.8.0",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "~1.13.0",
    "react-native-render-html": "^5.1.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-sortable-list": "^0.0.24",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-tab-view": "^2.15.2",
    "react-native-unimodules": "~0.12.0",
    "react-native-vector-icons": "^8.1.0"
  },

Was able to achieve desired behavior by sorting manually after fetching the posts.