[question][feat] update question answer comments optimistically

apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx

@@ -158,19 +158,18 @@ export default function QuestionPage() {
                 </div>
               </div>
               {/* TODO: Allow to load more pages */}
-              {(answerCommentsData?.pages ?? []).flatMap(
-                ({ processedQuestionAnswerCommentsData: comments }) =>
-                  comments.map((comment) => (
-                    <AnswerCommentListItem
-                      key={comment.id}
-                      answerCommentId={comment.id}
-                      authorImageUrl={comment.userImage}
-                      authorName={comment.user}
-                      content={comment.content}
-                      createdAt={comment.createdAt}
-                      upvoteCount={comment.numVotes}
-                    />
-                  )),
+              {(answerCommentsData?.pages ?? []).flatMap(({ data: comments }) =>
+                comments.map((comment) => (
+                  <AnswerCommentListItem
+                    key={comment.id}
+                    answerCommentId={comment.id}
+                    authorImageUrl={comment.userImage}
+                    authorName={comment.user}
+                    content={comment.content}
+                    createdAt={comment.createdAt}
+                    upvoteCount={comment.numVotes}
+                  />
+                )),
               )}
               <PaginationLoadMoreButton query={answerCommentInfiniteQuery} />
             </div>

apps/portal/src/server/router/questions/questions-answer-comment-router.ts

@@ -56,35 +56,36 @@ export const questionsAnswerCommentRouter = createRouter().query(
             answerId,
           },
         });
-      const processedQuestionAnswerCommentsData = questionAnswerCommentsData.map((data) => {
-        const votes: number = data.votes.reduce(
-          (previousValue: number, currentValue) => {
-            let result: number = previousValue;
+      const processedQuestionAnswerCommentsData =
+        questionAnswerCommentsData.map((data) => {
+          const votes: number = data.votes.reduce(
+            (previousValue: number, currentValue) => {
+              let result: number = previousValue;
 
-            switch (currentValue.vote) {
-              case Vote.UPVOTE:
-                result += 1;
-                break;
-              case Vote.DOWNVOTE:
-                result -= 1;
-                break;
-            }
-            return result;
-          },
-          0,
-        );
+              switch (currentValue.vote) {
+                case Vote.UPVOTE:
+                  result += 1;
+                  break;
+                case Vote.DOWNVOTE:
+                  result -= 1;
+                  break;
+              }
+              return result;
+            },
+            0,
+          );
 
-        const answerComment: AnswerComment = {
-          content: data.content,
-          createdAt: data.createdAt,
-          id: data.id,
-          numVotes: votes,
-          updatedAt: data.updatedAt,
-          user: data.user?.name ?? '',
-          userImage: data.user?.image ?? '',
-        };
-        return answerComment;
-      });
+          const answerComment: AnswerComment = {
+            content: data.content,
+            createdAt: data.createdAt,
+            id: data.id,
+            numVotes: votes,
+            updatedAt: data.updatedAt,
+            user: data.user?.name ?? '',
+            userImage: data.user?.image ?? '',
+          };
+          return answerComment;
+        });
 
       let nextCursor: typeof cursor | undefined = undefined;
 
@@ -98,9 +99,9 @@ export const questionsAnswerCommentRouter = createRouter().query(
       }
 
       return {
+        data: processedQuestionAnswerCommentsData,
         nextCursor,
-        processedQuestionAnswerCommentsData,
-      }
+      };
     },
   },
 );

apps/portal/src/utils/questions/useVote.ts

@@ -5,7 +5,12 @@ import { Vote } from '@prisma/client';
 
 import { trpc } from '../trpc';
 
-import type { Answer, Question, QuestionComment } from '~/types/questions';
+import type {
+  Answer,
+  AnswerComment,
+  Question,
+  QuestionComment,
+} from '~/types/questions';
 
 type UseVoteOptions = {
   setDownVote: () => void;
@@ -253,9 +258,48 @@ export const useQuestionCommentVote = (id: string) => {
 };
 
 export const useAnswerCommentVote = (id: string) => {
+  const utils = trpc.useContext();
+
   return useVote(id, {
     idKey: 'answerCommentId',
-    invalidateKeys: ['questions.answers.comments.getAnswerComments'],
+    invalidateKeys: [],
+    onMutate: async (voteValueChange) => {
+      // Update answer comment list
+      const answerCommentQueries = utils.queryClient.getQueriesData([
+        'questions.answers.comments.getAnswerComments',
+      ]);
+
+      if (answerCommentQueries !== undefined) {
+        for (const [key, query] of answerCommentQueries) {
+          if (query === undefined) {
+            continue;
+          }
+
+          const { pages, ...restQuery } = query as InfiniteData<{
+            data: Array<AnswerComment>;
+          }>;
+
+          const newQuery = {
+            pages: pages.map(({ data, ...restPage }) => ({
+              data: data.map((answerComment) => {
+                if (answerComment.id === id) {
+                  const { numVotes, ...restAnswerComment } = answerComment;
+                  return {
+                    numVotes: numVotes + voteValueChange,
+                    ...restAnswerComment,
+                  };
+                }
+                return answerComment;
+              }),
+              ...restPage,
+            })),
+            ...restQuery,
+          };
+
+          utils.queryClient.setQueryData(key, newQuery);
+        }
+      }
+    },
     query: 'questions.answers.comments.user.getVote',
     setDownVoteKey: 'questions.answers.comments.user.setDownVote',
     setNoVoteKey: 'questions.answers.comments.user.setNoVote',