refactor: 스크롤 추적 기능에 낙관적 업데이트 적용 (#ATR-594)

Atractorrr · Jul 30, 2024 · 4ff5aef · 4ff5aef
1 parent 87b09cf
commit 4ff5aef
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 18 deletions.
diff --git a/apps/service/src/entities/user-article/model/type/article.ts b/apps/service/src/entities/user-article/model/type/article.ts
@@ -15,8 +15,12 @@ export interface Article {
   newsletter: Pick<Newsletter, 'id' | 'name' | 'category' | 'thumbnailUrl'>
 }
 
+export interface UserArticlesData extends Pagination {
+  content: Article[]
+}
+
 export type UserArticlesResponse = {
-  data: { content: Article[] } & Pagination
+  data: UserArticlesData
   message: string
   status: string
 }

diff --git a/apps/service/src/entities/user-article/model/useSendUserArticleBookmarkState.ts b/apps/service/src/entities/user-article/model/useSendUserArticleBookmarkState.ts
@@ -44,11 +44,7 @@ export default function useSendUserArticleBookmarkState({
           pageType: 'bookmark',
         }),
       })
-      if (isBookmark) {
-        toast.success('북마크가 삭제되었어요')
-      } else {
-        toast.success('북마크가 추가되었어요')
-      }
+      toast.success(`북마크가 ${isBookmark ? '삭제' : '추가'}되었어요`)
     },
     onError: () =>
       toast.error(`북마크 ${isBookmark ? '삭제' : '추가'}에 실패했어요`),

diff --git a/apps/service/src/entities/user-article/model/useTrackingUserArticleScroll.ts b/apps/service/src/entities/user-article/model/useTrackingUserArticleScroll.ts
@@ -2,7 +2,7 @@
 
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useAuth } from '@/entities/auth'
-import type { UserArticleParams } from './type'
+import type { Article, UserArticleParams, UserArticlesData } from './type'
 import userArticleQueryKeys from './userArticleQueryKeys'
 import { trackingUserArticleScroll } from '../api'
 
@@ -12,20 +12,75 @@ export default function useTrackingUserArticleScroll({
   const { userEmail } = useAuth()
   const queryClient = useQueryClient()
 
+  const articleListKey = userArticleQueryKeys.userArticleList({
+    userEmail,
+    pageType: 'default',
+  })
+  const articleKey = userArticleQueryKeys.userArticle({ userEmail, articleId })
+
   return useMutation({
     mutationKey: userArticleQueryKeys.trackingUserArticleScroll({
       userEmail,
       articleId,
     }),
     mutationFn: (readPercentage: number) =>
       trackingUserArticleScroll({ userEmail, articleId, readPercentage }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: userArticleQueryKeys.userArticleList({
-          userEmail,
-          pageType: 'default',
-        }),
-      })
+    onMutate: (readPercentage) => {
+      try {
+        const prevArticleList = queryClient.getQueriesData({
+          queryKey: articleListKey,
+        })
+        const prevArticle = queryClient.getQueryData(articleKey)
+
+        queryClient.setQueriesData<{ pages: { data: UserArticlesData }[] }>(
+          {
+            queryKey: articleListKey,
+          },
+          (oldData) => {
+            if (oldData !== undefined) {
+              return {
+                ...oldData,
+                pages: oldData.pages.map((page) => ({
+                  ...page,
+                  data: {
+                    ...page.data,
+                    content: page.data.content.map((article) => {
+                      if (article.id === articleId) {
+                        return { ...article, readPercentage }
+                      }
+                      return article
+                    }),
+                  },
+                })),
+              }
+            }
+            return undefined
+          },
+        )
+        queryClient.setQueryData<Article>(articleKey, (oldData) => {
+          if (oldData) {
+            return { ...oldData, readPercentage }
+          }
+          return oldData
+        })
+        return { readPercentage, prevArticleList, prevArticle, status: true }
+      } catch {
+        return { readPercentage, status: false }
+      }
+    },
+    onSuccess: (_, __, context) => {
+      if (!context.status) {
+        queryClient.invalidateQueries({ queryKey: articleListKey })
+      }
+    },
+    onError: (_, __, context) => {
+      queryClient.setQueriesData(
+        {
+          queryKey: articleListKey,
+        },
+        context?.prevArticleList,
+      )
+      queryClient.setQueryData(articleKey, context?.prevArticle)
     },
   })
 }
diff --git a/apps/service/src/entities/user-article/model/userArticleQueryKeys.ts b/apps/service/src/entities/user-article/model/userArticleQueryKeys.ts
@@ -9,16 +9,13 @@ const userArticleQueryKeys = {
   ],
   userArticleList: ({
     userEmail,
-    category,
     pageType,
-    page,
     ...options
-  }: UserArticleListOption) => [
+  }: Omit<UserArticleListOption, 'page'>) => [
     ...userArticleQueryKeys.all,
     'articles',
     { userEmail },
     { pageType },
-    category,
     options,
   ],
   trackingUserArticleScroll: (params: UserArticleParams) => [