NextJS: react-firebase-hooks orderBy

Question

I am using this package https://github.com/csfrequency/react-firebase-hooks and the code below works.

const [posts, loading, error] = useCollection(
    firebase
      .firestore()
      .collection('posts')
      .where('uid', '==', uid),

    {
      snapshotListenOptions: { includeMetadataChanges: true },
    }
  )

However, when I add the orderBy to it, I got an error: Error: {"code":"failed-precondition","name":"FirebaseError"}

  const [posts, loading, error] = useCollection(
    firebase
      .firestore()
      .collection('posts')
      .where('uid', '==', uid)
      .orderBy('createdAt', 'desc'),
    {
      snapshotListenOptions: { includeMetadataChanges: true },
    }
  )

I wonder how should the query be constructed when using React-Firebase-Hooks. Any help would be greatly appreciated.

Answer 1

I think you need to add composite index:

collection post: uid Ascending createdAt Descending

Not sure how you get this error, but maybe you are able to get more details from it. I replicated it directly in node. And if you run such query directly in node you will get error massage with more details like:

Error: 9 FAILED_PRECONDITION: The query requires an index. You can create it here: https://console.firebase.google.com/v1/r/project/<project-id>/firestore/indexes?create_composite=Ck1wcm9qZWN0cy9zdXJ5amFrLXRlc3QtMDAvZGF0YWJhc2VzLyhkZWZhdWx0KS9jb2xsZWN0aW9uR3JvdXBzL3Bvc3RzL2luZGV4ZXMvXxABGgcKA3VpZBABGggKBHNvcnQQAhoMCghfX25hbWVfXxAC

If you hit the link in the error the index will be build automatically. The documentation to composite indexes is here