🔥 Invalid query. You must not call startAt() or startAfter() before calling orderBy()

[technoplato]

Issue

🔥 I'm trying to create a paging list that keeps loaded items in sync in real time. I'm running into an issue (detailed below) when attempting to load older items. (StackOverflow)[https://stackoverflow.com/questions/57840976/im-trying-to-create-a-paging-list-that-keeps-loaded-items-in-sync-in-real-time]

  async componentDidMount() {
    this.postsRef = firestore().collection('posts')
    this.oldestPostTime = new Date().getTime()
    this.changesUnsubscribe = () =>
      console.log(
        'This method will be used to unsubscribe our listener when we fetch older posts.'
      )
    this.loadMorePosts()
  }
  
  loadMorePosts = async () => {
    this.changesUnsubscribe()
    console.log(this.oldestPostTime)
    const posts = await this.postsRef
      .orderBy('created', 'desc')
      .startAt(this.oldestPostTime)
      .limit(this.PAGE_SIZE)
      .get()
      .then(collection => {
        const numPosts = collection.size
        if (numPosts === 0) {
          console.log("0 docs fetched, this shouldn't have been called.")
          return {}
        } else if (numPosts < this.PAGE_SIZE) {
          console.log('No older posts exist. Only listen for new posts now.')
        }
  
        const posts = { ...this.state.posts }
        collection.forEach(doc => {
          const post = doc.data()
          posts[post.id] = this.prunePost(post)
        })
        console.log('oldest post time was: ', this.oldestPostTime)
        this.oldestPostTime = collection.docs[numPosts - 1].data().created
        console.log('oldest post time is: ', this.oldestPostTime)
        return posts
      })
  
    console.log('What the fuck')
  
    await new Promise(res => this.setState({ posts }, () => res()))
  
    console.log('What the hell')
  
    this.changesUnsubscribe = firestore()
      .collection('posts')
      .orderBy('created', 'desc')
      .startAt(this.oldestPostTime)
      .onSnapshot(this.onPostsUpdated)
  }
  
  onPostsUpdated = postsCollection => {
    const posts = { ...this.state.posts }
    postsCollection.docChanges().forEach(({ type, doc }) => {
      const post = doc.data()
      if (type === 'added') {
        if (!posts[post.id]) {
          // If the post is already present, do not add it again.
          // Firestore snapshot does not have simple functionality to only
          // listen to changes on windows of data.
          this.stagePost(post)
        }
      }
      if (type === 'modified') {
        posts[post.id] = this.prunePost(post)
      }
      if (type === 'removed') {
        delete posts[post.id]
      }
    })
  
    this.setState({ posts })
  }

Describe your issue here

---

Project Files

iOS

Click To Expand

ios/Podfile:

• I'm not using Pods
• I'm using Pods and my Podfile looks like:
  N/A

# N/A

AppDelegate.m:

// N/A

---

Android

Click To Expand

Have you converted to AndroidX?

• my application is an AndroidX application?
• I am using android/gradle.settings jetifier=true for Android compatibility?
• I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

// N/A

AndroidManifest.xml:

<!-- N/A -->

---

Environment

Click To Expand

react-native info output:

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Xeon(R) CPU E5-1620 v2 @ 3.70GHz
    Memory: 30.54 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.16.1 - ~/.nvm/versions/node/v8.16.1/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.16.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 10, 19, 21, 23, 24, 25, 26, 27, 28
      Build Tools: 19.1.0, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.0, 26.0.0, 26.0.1, 26.0.2, 27.0.0, 27.0.1, 27.0.3, 28.0.0, 28.0.1, 28.0.3, 29.0.0
      System Images: android-23 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Android TV Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom
  IDEs:
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• react-native-firebase version you're using that has this issue:
  • @react-native-firebase/firestore: 0.2.3
• Firebase module(s) you're using that has the issue:
  • firestore
• Are you using TypeScript?
  • N

---

Think react-native-firebase is great? Please consider supporting all of the project maintainers and contributors by donating via our Open Collective where all contributors can submit expenses. [Learn More]

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[Salakar]

cc @Ehesp maybe validation failing here, tests?

[Ehesp]

https://github.com/invertase/react-native-firebase/blob/master/packages/firestore/lib/FirestoreQuery.js#L282

I'll check this out.

[technoplato]

I fixed it by storing the next query as a class property. Will upload the working code when I get back to my desktop. Still, I thought it was kind of strange for this to error out.

[Ehesp]

Ok so I see what's going on here.

this.postsRef = firestore().collection('posts')

The postsRef is being stored as a single instance here, and when calling a query on this the first time around it's attaching the query calls to it. When calling it the second time, it's then already been queried hence the error. The WebSDK gets around this somehow which I'd need to look into.

For now, just create a new firestore().collection('posts') each time - this is all done JS side so won't be an issue.

[technoplato]

That’s essentially the fix I mention above. Should we go ahead and close this?