🐛 Fixed newly posted replies sometimes not appearing

no issue
Caching can serve a stale replies response immediately after creation, so we preserve the POSTed reply while still using the refetch to pick up concurrent replies.

Author: kevinansfield

apps/comments-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/comments-ui",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "license": "MIT",
   "repository": "https://github.com/TryGhost/Ghost",
   "author": "Ghost Foundation",

apps/comments-ui/src/actions.ts

@@ -136,16 +136,21 @@ async function addReply({state, api, data: {reply, parent}}: {state: EditableApp
     const newComment = data.comments[0];
 
     const allReplies = await api.comments.replies({commentId: parent.id, limit: 'all'});
+    // Caching can serve a stale replies response immediately after creation, so
+    // keep the refetch for concurrent replies but preserve the POSTed reply.
+    const replies = allReplies.comments.some(replyComment => replyComment.id === newComment.id)
+        ? allReplies.comments
+        : [...allReplies.comments, newComment];
 
     return {
         comments: state.comments.map((c) => {
             if (c.id === parent.id) {
                 return {
                     ...c,
-                    replies: allReplies.comments,
+                    replies,
                     count: {
                         ...c.count,
-                        replies: allReplies.comments.length
+                        replies: replies.length
                     }
                 };
             }

apps/comments-ui/test/unit/actions.test.js

@@ -81,6 +81,110 @@ describe('Actions', function () {
         });
     });
 
+    describe('addReply', function () {
+        it('adds the created reply when the replies refetch is stale', async function () {
+            const newReply = makeComment({
+                id: 'new-reply',
+                html: '<p>New reply</p>',
+                parent_id: 'comment-1'
+            });
+            const existingReply = makeComment({
+                id: 'existing-reply',
+                html: '<p>Existing reply</p>',
+                parent_id: 'comment-1'
+            });
+            const state = {
+                commentCount: 1,
+                comments: [
+                    makeComment({
+                        id: 'comment-1',
+                        replies: [],
+                        count: {
+                            replies: 0,
+                            likes: 0
+                        }
+                    })
+                ]
+            };
+            const api = {
+                comments: {
+                    add: vi.fn(() => Promise.resolve({comments: [newReply]})),
+                    replies: vi.fn(() => Promise.resolve({comments: [existingReply]}))
+                }
+            };
+
+            const newState = await Actions.addReply({
+                state,
+                api,
+                data: {
+                    parent: state.comments[0],
+                    reply: {
+                        post_id: 'post-1',
+                        html: '<p>New reply</p>',
+                        status: 'published'
+                    }
+                }
+            });
+
+            expect(api.comments.add).toHaveBeenCalledWith({
+                comment: {
+                    post_id: 'post-1',
+                    html: '<p>New reply</p>',
+                    status: 'published',
+                    parent_id: 'comment-1'
+                }
+            });
+            expect(api.comments.replies).toHaveBeenCalledWith({commentId: 'comment-1', limit: 'all'});
+            expect(newState.comments[0].replies.map(reply => reply.id)).toEqual(['existing-reply', 'new-reply']);
+            expect(newState.comments[0].count.replies).toBe(2);
+            expect(newState.commentCount).toBe(2);
+            expect(newState.commentIdToScrollTo).toBe('new-reply');
+        });
+
+        it('does not duplicate the created reply when the replies refetch includes it', async function () {
+            const newReply = makeComment({
+                id: 'new-reply',
+                html: '<p>New reply</p>',
+                parent_id: 'comment-1'
+            });
+            const state = {
+                commentCount: 1,
+                comments: [
+                    makeComment({
+                        id: 'comment-1',
+                        replies: [],
+                        count: {
+                            replies: 0,
+                            likes: 0
+                        }
+                    })
+                ]
+            };
+            const api = {
+                comments: {
+                    add: vi.fn(() => Promise.resolve({comments: [newReply]})),
+                    replies: vi.fn(() => Promise.resolve({comments: [newReply]}))
+                }
+            };
+
+            const newState = await Actions.addReply({
+                state,
+                api,
+                data: {
+                    parent: state.comments[0],
+                    reply: {
+                        post_id: 'post-1',
+                        html: '<p>New reply</p>',
+                        status: 'published'
+                    }
+                }
+            });
+
+            expect(newState.comments[0].replies.map(reply => reply.id)).toEqual(['new-reply']);
+            expect(newState.comments[0].count.replies).toBe(1);
+        });
+    });
+
     describe('deleteComment', function () {
         it('keeps a deleted reply as a tombstone when it has descendants', async function () {
             const state = {

apps/comments-ui/test/utils/mocked-api.ts

@@ -74,11 +74,12 @@ export class MockedApi {
             if (parent) {
                 parent.replies.push(fixture);
                 parent.count.replies = parent.replies.length;
-                return;
+                return fixture;
             }
         }
 
         this.comments.push(fixture);
+        return fixture;
     }
 
     buildReply(overrides: any = {}) {
@@ -361,15 +362,15 @@ export class MockedApi {
             const payload = JSON.parse(route.request().postData());
 
             this.#lastCommentDate = new Date();
-            this.addComment({
+            const comment = this.addComment({
                 ...payload.comments[0],
                 member: this.member
             });
             return await route.fulfill({
                 status: 200,
                 body: JSON.stringify({
                     comments: [
-                        this.comments[this.comments.length - 1]
+                        comment
                     ]
                 })
             });