enhance: store ids of new comments in the cache, instead of carrying full comments that would get discarded anyway

Author: Soxasora

components/show-new-comments.js

@@ -6,18 +6,20 @@ import { itemUpdateQuery, commentUpdateFragment } from './use-live-comments'
 
 function prepareComments (client, newComments) {
   return (data) => {
-    // TODO: it might be sane to pass the cache ref to the ShowNewComments component
-    // TODO: and use it to read the latest newComments from the cache
-    // newComments can have themselves new comments between the time the button is clicked and the query is executed
-    // so we need to read the latest newComments from the cache
-    const freshNewComments = newComments.map(c => {
+    // newComments is an array of comment ids that allows us
+    // to read the latest newComments from the cache, guaranteeing that we're not reading stale data
+    const freshNewComments = newComments.map(id => {
       const fragment = client.cache.readFragment({
-        id: `Item:${c.id}`,
+        id: `Item:${id}`,
         fragment: COMMENT_WITH_NEW,
         fragmentName: 'CommentWithNew'
       })
-      // if the comment is not in the cache, return the original comment
-      return fragment || c
+
+      if (!fragment) {
+        return null
+      }
+
+      return fragment
     })
 
     // count the total number of comments including nested comments
@@ -40,10 +42,12 @@ export function ShowNewComments ({ topLevel = false, comments, newComments = [],
   const client = useApolloClient()
 
   const dedupedNewComments = useMemo(() => {
-    return newComments.filter(c => !comments.some(cc => cc.id === c.id))
+    const existingIds = new Set(comments.map(c => c.id))
+    return newComments.filter(id => !existingIds.has(id))
   }, [newComments, comments])
 
   const showNewComments = useCallback(() => {
+    // fetch the latest version of the comments from the cache by their ids
     const payload = prepareComments(client, dedupedNewComments)
 
     if (topLevel) {

components/use-live-comments.js

@@ -114,7 +114,7 @@ function mergeNewComment (item, newComment) {
     return item
   }
 
-  return { ...item, newComments: [...existingNewComments, newComment] }
+  return { ...item, newComments: [...existingNewComments, newComment.id] }
 }
 
 function getLatestCommentCreatedAt (comments, latest) {