javascript - Displaying firestore timestamp gets error when using onSnapshot() on react-native

Question

I am creating a chat app using firestore where I use Flatlist and querying using onSnapshot() to show both sender and receiver realtime

my sample query below is like this:

const ChatMessages = useCallback(() => {
 privateMessage
  .doc(chatId)
  .collection('messages')
  .orderBy('createdAt', 'asc')
  .onSnapshot((querySnapshot) => {
    const messageList = [];
    querySnapshot.forEach((doc) => {
      messageList.push(doc.data());
    })
    setMessages(messageList);
  }, error => {
    console.log(error)
  })
 }, [chatId])

then in my sample flatlist I have the user display name, message, and the time created that will be displayed on the screen:

<FlatList
  data={messages}
  keyExtractor={(item, index) => String(index)}
  removeClippedSubviews={false}
  renderItem={({ item }) => (

   <View>

      <Text style={chatstyle.pmdate}>
        {item.createdAt.toDate().toDateString()}
      </Text>

      <Text>
        {item.displayName}
      </Text>

      <Text>
        {item.message}
      </Text>

   </View>
  )}
/>

I would like to display the time and date but when using onSnapshot() I get null is not an object (evaluating 'item.createdAt.toDate') error but when I removed {item.createdAt.toDate().toDateString()} everything is ok. I tried the get() query and the timestamp works fine but of course it's not realtime.

What is the right way to display the timestamp using onSnapshot()?

question from:https://stackoverflow.com/questions/66057189/displaying-firestore-timestamp-gets-error-when-using-onsnapshot-on-react-nativ

Answer 1

Your problem comes from the "latency compensation": "Local writes in your app will invoke snapshot listeners immediately. ... When you perform a write, your listeners will be notified with the new data before the data is sent to the backend". See the doc on onSnapshot().

Since you use firebase.firestore.FieldValue.serverTimestamp() to set the value of createdAt (which is a good approach), the value of createdAt is calculated by the backend (the serverTimestamp sentinel is replaced by a server-generated timestamp in the written data).

Therefore, at the moment the snapshot listener is invoked in your front-end following the local write ("Local writes in your app will invoke snapshot listeners immediately"), this value is not set (item.createdAt.toDate() generates an error).

One solution is to use the metadata.hasPendingWrites property that indicates whether the document has local changes that haven't been written to the backend yet.

For example:

const ChatMessages = useCallback(() => {
 privateMessage
  .doc(chatId)
  .collection('messages')
  .orderBy('createdAt', 'asc')
  .onSnapshot((querySnapshot) => {
    const messageList = [];
    querySnapshot.forEach((doc) => {
      messageList.push(doc.data());
    })
    if (!querySnapshot.metadata.hasPendingWrites) {  // <======
       setMessages(messageList);
    }

  }, error => {
    console.log(error)
  })
 }, [chatId])