atomic apollo cache manipulations; manage top sort not being present in Item query cache

Author: Soxasora

components/use-live-comments.js

@@ -7,6 +7,21 @@ import styles from './comment.module.css'
 
 const POLL_INTERVAL = 1000 * 10 // 10 seconds
 
+function itemUpdateQuery (client, id, sort, fn) {
+  client.cache.updateQuery({
+    query: ITEM_FULL,
+    variables: sort === 'top' ? { id } : { id, sort }
+  }, (data) => fn(data))
+}
+
+function commentUpdateFragment (client, id, fn) {
+  client.cache.updateFragment({
+    id: `Item:${id}`,
+    fragment: COMMENT_WITH_NEW,
+    fragmentName: 'CommentWithNew'
+  }, (data) => fn(data))
+}
+
 export default function useLiveComments (rootId, after, sort) {
   const client = useApolloClient()
   const [latest, setLatest] = useState(after)
@@ -38,26 +53,15 @@ function cacheNewComments (client, rootId, newComments, sort) {
     // if the comment is a top level comment, update the item
     if (topLevel) {
       console.log('topLevel', topLevel)
-      client.cache.updateQuery({
-        query: ITEM_FULL,
-        variables: { id: rootId, sort } // TODO-LIVE: ok now item updates thanks to sort awareness, but please CLEAN THIS UP
-      }, (data) => {
-        console.log('data', data)
+      itemUpdateQuery(client, rootId, sort, (data) => {
         if (!data) return data
-        // we return the entire item, not just the newComments
         return { item: mergeNewComment(data?.item, newComment) }
       })
     } else {
       // if the comment is a reply, update the parent comment
       console.log('reply', parentId)
-      client.cache.updateFragment({
-        id: `Item:${parentId}`,
-        fragment: COMMENT_WITH_NEW,
-        fragmentName: 'CommentWithNew'
-      }, (data) => {
-        console.log('dataer', data)
+      commentUpdateFragment(client, parentId, (data) => {
         if (!data) return data
-        // here we return the parent comment with the new comment added
         return mergeNewComment(data, newComment)
       })
     }
@@ -95,10 +99,7 @@ export function ShowNewComments ({ newComments = [], itemId, topLevel = false, s
   const showNewComments = useCallback(() => {
     if (topLevel) {
       console.log('topLevel', topLevel)
-      client.cache.updateQuery({
-        query: ITEM_FULL,
-        variables: { id: itemId, sort } // TODO-LIVE: ok now item updates thanks to sort awareness, but please CLEAN THIS UP
-      }, (data) => {
+      itemUpdateQuery(client, itemId, sort, (data) => {
         console.log('data', data)
         if (!data) return data
         const { item } = data
@@ -113,11 +114,7 @@ export function ShowNewComments ({ newComments = [], itemId, topLevel = false, s
       })
     } else {
       console.log('reply', itemId)
-      client.cache.updateFragment({
-        id: `Item:${itemId}`,
-        fragment: COMMENT_WITH_NEW,
-        fragmentName: 'CommentWithNew'
-      }, (data) => {
+      commentUpdateFragment(client, itemId, (data) => {
         console.log('data', data)
         if (!data) return data
 
@@ -128,12 +125,12 @@ export function ShowNewComments ({ newComments = [], itemId, topLevel = false, s
         }
       })
     }
-  }, [client, itemId, newComments, sort, topLevel])
+  }, [client, itemId, newComments, topLevel, sort])
 
   // inject new comments into existing comments
   // if the new comment is already in existing comments, do nothing
   const injectComments = (existingComments = [], newComments = []) => {
-    const existingIds = new Set(existingComments.map(c => c.id))
+    const existingIds = new Set(existingComments.comments.map(c => c.id))
     const filteredNew = newComments.filter(c => !existingIds.has(c.id))
     return {
       ...existingComments,