DEV Community

Cover image for Firestore Data Model: Threaded Comments on Several Pages
Jonathan Gamble
Jonathan Gamble

Posted on • Edited on • Originally published at code.build

4

Firestore Data Model: Threaded Comments on Several Pages

Here is how I would model a comment thread if you have X amount of posts that might each have separate comment threads.

getComments

getComments(parentID: string, postID: string) {
  return db.collection(`posts/${postID}/comments`)
    .where('parent', '==', parentID)
    .orderBy('createdAt', 'desc');
}
Enter fullscreen mode Exit fullscreen mode

posts/postID/comments

commentDoc - root

{
  text: 'comment contents',
  uid: 293slek2l2s,
  parent: 'root',
  createdAt: serverTimestamp()
}
Enter fullscreen mode Exit fullscreen mode

commentDoc - child

{
  text: 'comment contents',
  uid: 293slek2l2s,
  parent: 'parentID',
  createdAt: serverTimestamp()
}
Enter fullscreen mode Exit fullscreen mode

post component

<comment parent="root', post="54232k21">
Enter fullscreen mode Exit fullscreen mode

comment component

<div class="container tab">
  <if comments=getComments(parent, post)>
    <forEach comments as comment>
      {{ comment.text }}
      user: {{ comment.uid }}
      <comment parent="comment.id", post="54232k21">
    </comment>
  <endIf>
</div>
Enter fullscreen mode Exit fullscreen mode

This HTML code is highly dependent on your framework, but I wanted to give a general idea of how I would model this.

Hopefully this works for you.

I will probably implement it in my Angular Project eventually.

J

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more