How to determine if the document does not exist at all or it's indeed still 'loading'?

[namiwang]

Take the firestore example here (https://stackblitz.com/edit/reactfire-v4-sample), if we change the querying doc path to

const burritoRef = doc(useFirestore(), 'tryreactfire', 'noburrito');

and it will be stuck in 'fetching burrito flavor' forever.

In some cases, we'd like to determine the request is finished and the document doesn't exist for now. Is there any way we could detect such a condition in reactfire? Thanks!

[jhuleatt]

Hi @namiwang, in that case the data field of the object returned by useFirestoreDocData will be undefined, and status will be success. This means that ReactFire is actively listening for that document in Firestore, but nothing is there. So you can just add a check:

function BurritoTaste() {
  // easily access the Firestore library
  const burritoRef = doc(useFirestore(), 'tryreactfire', 'burrito');

  // subscribe to a document for realtime updates. just one line!
  const { status, data } = useFirestoreDocData(burritoRef);

  // easily check the loading status
  if (status === 'loading') {
    return <p>Fetching burrito flavor...</p>;
  } else if (data === undefined) {
    return <p>Burrito not found!</p>;
  }

  return <p>The burrito is {data.yummy ? 'good' : 'bad'}!</p>;
}

[namiwang]

BTW I got what I want (success with undefined) using useDocDataOnce instead of useDocData, but the issue remains

[jhuleatt]

Thanks for the additional detail, @namiwang. This seems like a bug. I've reported it in #440

[atanaskanchev]

+1 I can confirm the same behaviour with version 4.1.0

[jhuleatt]

This turned out to be a bug in the core of ReactFire (useObservable, the hook that all other ReactFire hooks call). I'm working on a fix in #446 if anyone is interested in giving it a review. Thanks for bringing this to my attention!

[jhuleatt]

fixed in ReactFire 4.1.1