Firebase – How to extract data when onSnapshot is returned in realtime firestore?

Assumptions

This answer assumes a user’s data looks like this in your Firestore:

// Document at /users/someUserId
{
  "active": true,
  "contacts": {
    "someOtherUserId": {
      "lastMsg": "This is a message",
      "lastMsgTime": /* Timestamp */,
      "unreadMsg": true // unclear if this is a boolean or a count of messages
    },
    "anotherUserId": {
      "lastMsg": "Hi some user! How are you?",
      "lastMsgTime": /* Timestamp */,
      "unreadMsg": false
    }
  },
  "emailId": "[email protected]",
  "imageUrl": "https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg",
  "userName": "Some User"
}

Note: When asking questions in the future, please add examples of your data structure similar to the above

Attaching Listeners with Current Structure

The structure as shown above has a number of flaws. The "contacts" object in the user’s data should be moved to a sub-collection of the user’s main document. The reasons for this include:

• Any user can read another user’s (latest) messages (which can’t be blocked with security rules)
• Any user can read another user’s contacts list (which can’t be blocked with security rules)
• As an individual user messages more users, their user data will grow rapidly in size
• Each time you want to read a user’s data, you have to download their entire message map even if not using it
• As you fill out a user’s contacts array, you are fetching their entire user data document even though you only need their active, email, imageUrl, and userName properties
• Higher chance of encountering document write conflicts when two users are editing the contact list of the same user (such as when sending a message)
• Hard to (efficiently) detect changes to a user’s contact list (e.g. new addition, deletion)
• Hard to (efficiently) listen to changes to another user’s active status, email, profile image and display name as the listeners would be fired for every message update they receive

To fetch a user’s contacts once in your functions.js library, you would use:

// Utility function: Used to hydrate an entry in a user's "contacts" map
const getContactFromContactMapEntry = (db, [contactId, msgInfo]) => {
  return db.collection("users")
    .doc(contactId)
    .get()
    .then((contactDocSnapshot) => {
      const { lastMsg, lastMsgTime, unreadMsg, userName } = msgInfo;
      
      const baseContactData = {
        lastMessage: lastMsg,
        time: lastMsgTime,
        unreadMsg,
        userId: contactId
      }
      
      if (!contactDocSnapshot.exists) {
        // TODO: Decide how to handle unknown/deleted users
        return {
          ...baseContactData,
          active: false,           // deleted users are inactive, nor do they
          email: null,             // have an email, image or display name
          img: null,
          userName: "Deleted user"
        };
      }
      
      const { active, emailId, imageUrl, userName } = contactDocSnapshot.data();
      
      return {
        ...baseContactData,
        active,
        email: emailId,
        img: imageUrl,
        userName
      };
    });
};

export const getUserContacts = (db, userId) => { // <-- note that db and userId are passed in
  return db.collection("users")
    .doc(userId)
    .get()
    .then((userDataSnapshot) => {
      const contactsMetadataMap = userDataSnapshot.get("contacts");
      return Promise.all( // <-- waits for each Promise to complete
        Object.entries(contactsMetadataMap) // <-- used to get an array of id-value pairs that we can iterate over
          .map(getContactFromContactMapEntry.bind(null, db)); // for each contact, call the function (reusing db), returning a Promise with the data
      );
    });
}

Example Usage:

getUserContacts(db, userId)
  .then((contacts) => console.log("Contacts data:", contacts))
  .catch((err) => console.error("Failed to get contacts:", err))
  
// OR

try {
  const contacts = await getUserContacts(db, userId);
  console.log("Contacts data:", contacts);
} catch (err) {
  console.error("Failed to get contacts:", err)
}

To fetch a user’s contacts, and keep the list updated, using a function in your functions.js library, you would use:

// reuse getContactFromContactMapEntry as above

export const useUserContacts = (db, userId) => {
  if (!db) throw new TypeError("Parameter 'db' is required");
  
  const [userContactsData, setUserContactsData] = useState({ loading: true, contacts: [], error: null });
  
  useEffect(() => {
    // no user signed in?
    if (!userId) {
      setUserContactsData({ loading: false, contacts: [], error: "No user signed in" });
      return;
    }
    
    // update loading status (as needed)
    if (!userContactsData.loading) {
      setUserContactsData({ loading: true, contacts: [], error: null });
    }
    
    let detached = false;
    
    const detachListener = db.collection("users")
      .doc(userId)
      .onSnapshot({
        next: (userDataSnapshot) => {
          const contactsMetadataMap = userDataSnapshot.get("contacts");
          
          const hydrateContactsPromise = Promise.all( // <-- waits for each Promise to complete
            Object.entries(contactsMetadataMap) // <-- used to get an array of id-value pairs that we can iterate over
              .map(getContactFromContactMapEntry.bind(null, db)); // for each contact, call the function (reusing db), returning a Promise with the data
          );
          
          hydrateContactsPromise
            .then((contacts) => {
              if (detached) return; // detached already, do nothing.
              setUserContactsData({ loading: false, contacts, error: null });
            })
            .catch((err) => {
              if (detached) return; // detached already, do nothing.
              setUserContactsData({ loading: false, contacts: [], error: err });
            });
        },
        error: (err) => {
          setUserContactsData({ loading: false, contacts: [], error: err });
        }
      });
      
    return () => {
      detached = true;
      detachListener();
    }
  }, [db, userId])
}

Note: The above code will not (due to complexity):

• react to changes in another user’s active status, email or profile image
• properly handle when the setUserContactsData method is called out of order due to network issues
• handle when db instance is changed on every render

Example Usage:

const { loading, contacts, error } = useUserContacts(db, userId);

Attaching Listeners with Sub-collection Structure

To restructure your data for efficiency, your structure would be updated to the following:

// Document at /users/someUserId
{
  "active": true,
  "emailId": "[email protected]",
  "imageUrl": "https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg",
  "userName": "Some User"
}

// Document at /users/someUserId/contacts/someOtherUserId
{
  "lastMsg": "This is a message",
  "lastMsgTime": /* Timestamp */,
  "unreadMsg": true // unclear if this is a boolean or a count of messages
}

// Document at /users/someUserId/contacts/anotherUserId
{
  "lastMsg": "Hi some user! How are you?",
  "lastMsgTime": /* Timestamp */,
  "unreadMsg": false
}

Using the above structure provides the following benefits:

• Significantly better network performance when hydrating the contacts list
• Security rules can be used to ensure users can’t read each others contacts lists
• Security rules can be used to ensure a message stays private between the two users
• Listening to another user’s profile updates can be done without reading or being notified of any changes to their other private messages
• You can partially fetch a user’s message inbox rather than the whole list
• The contacts list is easy to update as two users updating the same contact entry is unlikely
• Easy to detect when a user’s contact entry has been added, deleted or modified (such as receiving a new message or marking a message read)

To fetch a user’s contacts once in your functions.js library, you would use:

// Utility function: Merges the data from an entry in a user's "contacts" collection with that user's data
const mergeContactEntrySnapshotWithUserSnapshot = (contactEntryDocSnapshot, contactDocSnapshot) => {
  const { lastMsg, lastMsgTime, unreadMsg } = contactEntryDocSnapshot.data();
  
  const baseContactData = {
    lastMessage: lastMsg,
    time: lastMsgTime,
    unreadMsg,
    userId: contactEntryDocSnapshot.id
  }
  
  if (!contactDocSnapshot.exists) {
    // TODO: Handle unknown/deleted users
    return {
      ...baseContactData,
      active: false,           // deleted users are inactive, nor do they
      email: null,             // have an email, image or display name
      img: null,
      userName: "Deleted user"
    };
  }
  
  const { active, emailId, imageUrl, userName } = contactDocSnapshot.data();
  
  return {
    ...baseContactData,
    active,
    email: emailId,
    img: imageUrl,
    userName
  };
}

// Utility function: Used to hydrate an entry in a user's "contacts" collection
const getContactFromContactsEntrySnapshot = (db, contactEntryDocSnapshot) => {
  return db.collection("users")
    .doc(contactEntry.userId)
    .get()
    .then((contactDocSnapshot) => mergeContactEntrySnapshotWithUserSnapshot(contactEntryDocSnapshot, contactDocSnapshot));
};

export const getUserContacts = (db, userId) => { // <-- note that db and userId are passed in
  return db.collection("users")
    .doc(userId)
    .collection("contacts")
    .get()
    .then((userContactsQuerySnapshot) => {
      return Promise.all( // <-- waits for each Promise to complete
        userContactsQuerySnapshot.docs // <-- used to get an array of entry snapshots that we can iterate over
          .map(getContactFromContactsEntrySnapshot.bind(null, db)); // for each contact, call the function (reusing db), returning a Promise with the data
      );
    });
}

Example Usage:

getUserContacts(db, userId)
  .then((contacts) => console.log("Contacts data:", contacts))
  .catch((err) => console.error("Failed to get contacts:", err))
  
// OR

try {
  const contacts = await getUserContacts(db, userId);
  console.log("Contacts data:", contacts);
} catch (err) {
  console.error("Failed to get contacts:", err)
}

To fetch a user’s contacts in a way where it’s kept up to date, we first need to introduce a couple of utility useEffect wrappers (there are libraries for more robust implementations):

export const useFirestoreDocument = ({ db, path }) => {
  if (!db) throw new TypeError("Property 'db' is required");
  
  const [documentInfo, setDocumentInfo] = useState({ loading: true, snapshot: null, error: null });
  
  useEffect(() => {
    if (!path) {
      setDocumentInfo({ loading: false, snapshot: null, error: "Invalid path" });
      return;
    }
    
    // update loading status (as needed)
    if (!documentInfo.loading) {
      setDocumentInfo({ loading: true, snapshot: null, error: null });
    }
    
    return db.doc(path)
      .onSnapshot({
        next: (docSnapshot) => {
          setDocumentInfo({ loading: false, snapshot, error: null });
        },
        error: (err) => {
          setDocumentInfo({ loading: false, snapshot: null, error: err });
        }
      });
  }, [db, path]);
  
  return documentInfo;
}

export const useFirestoreCollection = ({ db, path }) => {
  if (!db) throw new TypeError("Property 'db' is required");
  
  const [collectionInfo, setCollectionInfo] = useState({ loading: true, docs: null, error: null });
  
  useEffect(() => {
    if (!path) {
      setCollectionInfo({ loading: false, docs: null, error: "Invalid path" });
      return;
    }
    
    // update loading status (as needed)
    if (!collectionInfo.loading) {
      setCollectionInfo({ loading: true, docs: null, error: null });
    }
    
    return db.collection(path)
      .onSnapshot({
        next: (querySnapshot) => {
          setCollectionInfo({ loading: false, docs: querySnapshot.docs, error: null });
        },
        error: (err) => {
          setCollectionInfo({ loading: false, docs: null, error: err });
        }
      });
  }, [db, path]);
  
  return collectionInfo;
}

To use that method to hydrate a contact, you would call it from a ContactEntry component:

// mergeContactEntrySnapshotWithUserSnapshot is the same as above

const ContactEntry = ({ db, userId, key: contactId }) => {
  if (!db) throw new TypeError("Property 'db' is required");
  if (!userId) throw new TypeError("Property 'userId' is required");
  if (!contactId) throw new TypeError("Property 'key' (the contact's user ID) is required");

  const contactEntryInfo = useFirestoreDocument(db, `/users/${userId}/contacts/${contactId}`);
  const contactUserInfo = useFirestoreDocument(db, `/users/${contactId}`);
  
  if ((contactEntryInfo.loading && !contactEntryInfo.error) && (contactUserInfo.loading && !contactUserInfo.error)) {
    return (<div>Loading...</div>);
  }
  
  const error = contactEntryInfo.error || contactUserInfo.error;
  if (error) {
    return (<div>Contact unavailable: {error.message}</div>);
  }
  
  const contact = mergeContactEntrySnapshotWithUserSnapshot(contactEntryInfo.snapshot, contactUserInfo.snapshot);

  return (<!-- contact content here -->);
}

Those ContactEntry components would be populated from a Contacts component:

const Contacts = ({db}) => {
  if (!db) throw new TypeError("Property 'db' is required");
  
  const { user } = useFirebaseAuth();
  const contactsCollectionInfo = useFirestoreCollection(db, user ? `/users/${user.uid}/contacts` : null);
  
  if (!user) {
    return (<div>Not signed in!</div>);
  }
  
  if (contactsCollectionInfo.loading) {
    return (<div>Loading contacts...</div>);
  }
  
  if (contactsCollectionInfo.error) {
    return (<div>Contacts list unavailable: {contactsCollectionInfo.error.message}</div>);
  }
  
  const contactEntrySnapshots = contactsCollectionInfo.docs;
  
  return (
    <>{
      contactEntrySnapshots.map(snapshot => {
        return (<ContactEntry {...{ db, key: snapshot.id, userId: user.uid }} />);
      })
    }</>
  );
}

Example Usage:

const db = firebase.firestore();
return (<Contacts db={db} />);