🐛 리액트 쿼리 업데이트 오류 이슈 (#140)

* 🎉 검색 필터 모달 UI 및 기능 변경(일괄적용, 일괄 초기화 버튼 생성) * 🎉 리스트 staleTime 시간 변경 * 🎉 개별 알림 처리 기능 구현 * 🎉 내 카드 이미지 누를시, 물건 상세 정보 페이지로 이동 기능 * 🐛 리액트 쿼리 업데이트 오류 이슈
team-nabi · Nov 29, 2023 · 9286e7f · 9286e7f
1 parent 52b540e
commit 9286e7f
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 37 deletions.
diff --git a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx
@@ -13,27 +13,33 @@ const CardListContent = () => {
   const searchParams = useSearchParams()
 
   // TODO: 현재 API 명세에 status에 어떤 값을 줘야하는지에 대한 정의가 되어 있지 않기 때문에 임시로 상수 값을 전달함 => 추후에 실제 동작 값으로 고치기
-  const { data, fetchNextPage, isError, isFetchingNextPage, isLoading } =
-    useCardsQuery({
-      category:
-        (searchParams.get('category') as CategoryObjs['key']) || undefined,
-      priceRange:
-        (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined,
-      cardTitle: searchParams.get('cardTitle' as string) || '',
-    })
+  const {
+    data,
+    fetchNextPage,
+    isError,
+    isFetchingNextPage,
+    isLoading,
+    hasNextPage,
+  } = useCardsQuery({
+    category:
+      (searchParams.get('category') as CategoryObjs['key']) || undefined,
+    priceRange:
+      (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined,
+    cardTitle: searchParams.get('cardTitle' as string) || '',
+  })
 
   const lastElementRef = useRef<HTMLDivElement | null>(null)
   const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
 
   useEffect(() => {
-    if (isFetchingNextPage) {
+    if (isFetchingNextPage || !hasNextPage) {
       return
     }
 
     if (entry?.isIntersecting) {
       fetchNextPage()
     }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage])
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
 
   // TODO: 아이템이 없을시 어떤 UI를 보여줄지 차후에 결정
 

diff --git a/src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx b/src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx
@@ -11,23 +11,29 @@ import TradeStatusTabs from '../trade-status-tabs'
 const MyCardListContent = () => {
   const [tradeStatus, setTradeStatus] = useState<TradeStatus>('TRADE_AVAILABLE')
 
-  const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } =
-    useMyCardsQuery({
-      tradeStatus,
-    })
+  const {
+    data,
+    fetchNextPage,
+    isLoading,
+    isError,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useMyCardsQuery({
+    tradeStatus,
+  })
 
   const lastElementRef = useRef<HTMLDivElement | null>(null)
   const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
 
   useEffect(() => {
-    if (isFetchingNextPage) {
+    if (isFetchingNextPage || !hasNextPage) {
       return
     }
 
     if (entry?.isIntersecting) {
       fetchNextPage()
     }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage])
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
 
   const isEmpty = data?.pages[0].data.cardList.length === 0
   return (
@@ -45,7 +51,6 @@ const MyCardListContent = () => {
         <MyCardList data={data} />
       </ExceptionBoundary>
 
-
       <div ref={lastElementRef} />
     </>
   )

diff --git a/src/app/(root)/(routes)/chatrooms/components/chat-room-list-content/ChatRoomListContent.tsx b/src/app/(root)/(routes)/chatrooms/components/chat-room-list-content/ChatRoomListContent.tsx
@@ -7,21 +7,27 @@ import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import ChatRoomList from '../chat-room-list'
 
 const ChatRoomListContent = () => {
-  const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } =
-    useChatRoomsQuery()
+  const {
+    data,
+    fetchNextPage,
+    isLoading,
+    isError,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useChatRoomsQuery()
 
   const lastElementRef = useRef<HTMLDivElement | null>(null)
   const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
 
   useEffect(() => {
-    if (isFetchingNextPage) {
+    if (isFetchingNextPage || !hasNextPage) {
       return
     }
 
     if (entry?.isIntersecting) {
       fetchNextPage()
     }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage])
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
 
   const isEmpty = data?.pages[0].data.chatRoomList.length === 0
 

diff --git a/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx b/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx
@@ -7,21 +7,28 @@ import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import MyDibsList from './MyDibsList'
 
 const MyDibsTemplate = () => {
-  const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } =
-    useMyDibsQuery()
+  const {
+    data,
+    fetchNextPage,
+    isLoading,
+    isError,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useMyDibsQuery()
 
   const lastElementRef = useRef<HTMLDivElement | null>(null)
   const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
 
   useEffect(() => {
-    if (isFetchingNextPage) {
+    console.log(hasNextPage)
+    if (isFetchingNextPage || !hasNextPage) {
       return
     }
 
     if (entry?.isIntersecting) {
       fetchNextPage()
     }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage])
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
 
   const isEmpty = data?.pages[0].data.dibList.length === 0
 

diff --git a/...)/(routes)/history/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx b/...)/(routes)/history/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx
@@ -7,21 +7,27 @@ import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import MyTradeHistoryList from '../my-trade-history-list/MyTradeHistoryList'
 
 const MyTradeHistoryListContent = () => {
-  const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } =
-    useMyTradeHistoryQuery()
+  const {
+    data,
+    fetchNextPage,
+    isLoading,
+    isError,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useMyTradeHistoryQuery()
 
   const lastElementRef = useRef<HTMLDivElement | null>(null)
   const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
 
   useEffect(() => {
-    if (isFetchingNextPage) {
+    if (isFetchingNextPage || !hasNextPage) {
       return
     }
 
     if (entry?.isIntersecting) {
       fetchNextPage()
     }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage])
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
 
   const isEmpty = data?.pages[0].data.historyList.length === 0
 

diff --git a/...)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx b/...)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx
@@ -11,21 +11,27 @@ import NotificationStatusTabs from '../notification-status-tabs'
 const NotificationListContent = () => {
   const [isRead, setIsRead] = useState(false)
 
-  const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } =
-    useNotificationsQuery(isRead)
+  const {
+    data,
+    fetchNextPage,
+    isLoading,
+    isError,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useNotificationsQuery(isRead)
 
   const lastElementRef = useRef<HTMLDivElement | null>(null)
   const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
 
   useEffect(() => {
-    if (isFetchingNextPage) {
+    if (isFetchingNextPage || !hasNextPage) {
       return
     }
 
     if (entry?.isIntersecting) {
       fetchNextPage()
     }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage])
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
 
   const isEmpty = data?.pages[0].data.notificationList.length === 0
 

diff --git a/.../suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx b/.../suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx
@@ -16,21 +16,27 @@ const MySuggestionListContent = () => {
     useState<DirectionType>('RECEIVE')
   const { myCardId } = useParams()
 
-  const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } =
-    useMySuggestionsQuery(suggestionTypeState, directionTypeState, myCardId)
+  const {
+    data,
+    fetchNextPage,
+    isLoading,
+    isError,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useMySuggestionsQuery(suggestionTypeState, directionTypeState, myCardId)
 
   const lastElementRef = useRef<HTMLDivElement | null>(null)
   const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
 
   useEffect(() => {
-    if (isFetchingNextPage) {
+    if (isFetchingNextPage || !hasNextPage) {
       return
     }
 
     if (entry?.isIntersecting) {
       fetchNextPage()
     }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage])
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
 
   const isEmpty = data?.pages[0].data.suggestionList.length === 0
   return (