From a5aef125c6086bc82cbeca53adbdf41924bf2ff7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=9A=B0=EC=B0=AC?= Date: Sun, 24 Dec 2023 13:25:41 +0900 Subject: [PATCH] =?UTF-8?q?queryKey=EB=B6=88=EC=9D=BC=EC=B9=98=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B8=ED=95=9C=20myTrip=20=EC=83=81=EC=84=B8=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#769)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: queryKey불일치로 인한 myTrip 상세정보 페이지 오류 수정 * refactor: queryKey 불일치로 인해 myTrip에서 발생한 오류 수정 * fix: 실패할 수밖에 없는 테스트코드 수정 * refactor: invalidateQueries 시 queryKey 불일치문제로 인한 오류 수정 --- frontend/cypress/e2e/createTrip.cy.ts | 2 +- frontend/src/hooks/api/useAddTripItemMutation.ts | 2 +- frontend/src/hooks/api/useCommunityTripQuery.ts | 2 +- frontend/src/hooks/api/useDayLogOrderMutation.ts | 2 +- frontend/src/hooks/api/useDeleteTripItemMutation.ts | 4 ++-- frontend/src/hooks/api/useExpenseQuery.ts | 2 +- frontend/src/hooks/api/useTripEditMutation.ts | 2 +- frontend/src/hooks/api/useTripEditPageQueries.ts | 2 +- frontend/src/hooks/api/useTripPublishMutation.ts | 2 +- frontend/src/hooks/api/useTripQuery.ts | 2 +- frontend/src/hooks/api/useTripShareStatusMutation.ts | 2 +- frontend/src/hooks/api/useUpdateTripItemMutation.ts | 2 +- frontend/src/hooks/expense/useExpense.ts | 2 +- frontend/src/hooks/trip/useTrip.ts | 2 +- frontend/src/pages/TripPage/TripMobilePage.tsx | 1 + 15 files changed, 16 insertions(+), 15 deletions(-) diff --git a/frontend/cypress/e2e/createTrip.cy.ts b/frontend/cypress/e2e/createTrip.cy.ts index d3b48188a..2721de73d 100644 --- a/frontend/cypress/e2e/createTrip.cy.ts +++ b/frontend/cypress/e2e/createTrip.cy.ts @@ -37,7 +37,7 @@ describe('여행 생성 페이지', () => { cy.get('span').contains('오클랜드'); cy.get('svg[aria-label="삭제 아이콘"]').last().click(); - cy.get('span').should('not.contain.text', '오클랜드'); + cy.get('body').should('not.contain.text', '오클랜드'); }); it('방문 기간을 클릭해 달력을 열어 방문기간을 입력할 수 있다.', () => { diff --git a/frontend/src/hooks/api/useAddTripItemMutation.ts b/frontend/src/hooks/api/useAddTripItemMutation.ts index 7d0852887..d9d6b28cc 100644 --- a/frontend/src/hooks/api/useAddTripItemMutation.ts +++ b/frontend/src/hooks/api/useAddTripItemMutation.ts @@ -18,7 +18,7 @@ export const useAddTripItemMutation = () => { const addTripItemMutation = useMutation({ mutationFn: postTripItem, onSuccess: (_, { tripId }) => { - queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, tripId] }); + queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, 'trip', tripId] }); }, onError: (error: ErrorResponseData) => { if (error.code && error.code > ERROR_CODE.TOKEN_ERROR_RANGE) { diff --git a/frontend/src/hooks/api/useCommunityTripQuery.ts b/frontend/src/hooks/api/useCommunityTripQuery.ts index afb97eced..2a229e3b9 100644 --- a/frontend/src/hooks/api/useCommunityTripQuery.ts +++ b/frontend/src/hooks/api/useCommunityTripQuery.ts @@ -16,7 +16,7 @@ export const useCommunityTripQuery = (tripId: string) => { const isLoggedIn = useRecoilValue(isLoggedInState); const { data: communityTripData } = useSuspenseQuery({ - queryKey: [TRIP_TYPE.PUBLISHED, tripId], + queryKey: [TRIP_TYPE.PUBLISHED, 'trip', tripId], queryFn: () => getCommunityTrip(tripId, isLoggedIn), }); diff --git a/frontend/src/hooks/api/useDayLogOrderMutation.ts b/frontend/src/hooks/api/useDayLogOrderMutation.ts index 3efe25ecb..069a731ea 100644 --- a/frontend/src/hooks/api/useDayLogOrderMutation.ts +++ b/frontend/src/hooks/api/useDayLogOrderMutation.ts @@ -18,7 +18,7 @@ export const useDayLogOrderMutation = () => { const dayLogOrderMutation = useMutation({ mutationFn: patchDayLogItemOrder, onSuccess: (_, { tripId }) => { - queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, tripId] }); + queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, 'trip', tripId] }); }, onError: (error: ErrorResponseData) => { if (error.code && error.code > ERROR_CODE.TOKEN_ERROR_RANGE) { diff --git a/frontend/src/hooks/api/useDeleteTripItemMutation.ts b/frontend/src/hooks/api/useDeleteTripItemMutation.ts index eff688b99..c1b9a9fa4 100644 --- a/frontend/src/hooks/api/useDeleteTripItemMutation.ts +++ b/frontend/src/hooks/api/useDeleteTripItemMutation.ts @@ -20,7 +20,7 @@ export const useDeleteTripItemMutation = () => { const deleteTripItemMutation = useMutation({ mutationFn: deleteTripItem, onMutate: ({ tripId, itemId }) => { - const tripData = queryClient.getQueryData([TRIP_TYPE.PERSONAL, tripId]); + const tripData = queryClient.getQueryData([TRIP_TYPE.PERSONAL, 'trip', tripId]); queryClient.setQueryData([TRIP_TYPE.PERSONAL, tripId], (prevTripData) => { if (!prevTripData) return prevTripData; @@ -50,7 +50,7 @@ export const useDeleteTripItemMutation = () => { }, onSettled: (data, error, { tripId }) => { - queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, tripId] }); + queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, 'trip', tripId] }); }, }); diff --git a/frontend/src/hooks/api/useExpenseQuery.ts b/frontend/src/hooks/api/useExpenseQuery.ts index 9e57f7fa7..5fd5e5002 100644 --- a/frontend/src/hooks/api/useExpenseQuery.ts +++ b/frontend/src/hooks/api/useExpenseQuery.ts @@ -27,7 +27,7 @@ export const useExpenseQuery = (tripId: string, tripType: TripTypeData) => { } const { data: expenseData } = useSuspenseQuery({ - queryKey: [`${tripType}expense`, tripId], + queryKey: [tripType, 'expense', tripId], queryFn: match(tripType) .with(TRIP_TYPE.PUBLISHED, () => () => getCommunityTripExpense(tripId)) .with(TRIP_TYPE.SHARED, () => () => getSharedExpense(tripId)) diff --git a/frontend/src/hooks/api/useTripEditMutation.ts b/frontend/src/hooks/api/useTripEditMutation.ts index 6b6bd8bc2..433524e06 100644 --- a/frontend/src/hooks/api/useTripEditMutation.ts +++ b/frontend/src/hooks/api/useTripEditMutation.ts @@ -18,7 +18,7 @@ export const useTripEditMutation = () => { const tripMutation = useMutation({ mutationFn: putTrip, onSuccess: (_, { tripId }) => { - queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, tripId] }); + queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, 'trip', tripId] }); }, onError: (error: ErrorResponseData) => { if (error.code && error.code > ERROR_CODE.TOKEN_ERROR_RANGE) { diff --git a/frontend/src/hooks/api/useTripEditPageQueries.ts b/frontend/src/hooks/api/useTripEditPageQueries.ts index b039653bb..ea29c1095 100644 --- a/frontend/src/hooks/api/useTripEditPageQueries.ts +++ b/frontend/src/hooks/api/useTripEditPageQueries.ts @@ -8,7 +8,7 @@ import { TRIP_TYPE } from '@constants/trip'; export const useTripEditPageQueries = (tripId: string) => { const [{ data: tripData }, { data: expenseCategoryData }] = useSuspenseQueries({ queries: [ - { queryKey: [TRIP_TYPE.PERSONAL, tripId], queryFn: () => getTrip(tripId) }, + { queryKey: [TRIP_TYPE.PERSONAL, 'trip', tripId], queryFn: () => getTrip(tripId) }, { queryKey: ['expenseCategory'], queryFn: getExpenseCategory, staleTime: Infinity }, ], }); diff --git a/frontend/src/hooks/api/useTripPublishMutation.ts b/frontend/src/hooks/api/useTripPublishMutation.ts index 1378fcd28..930aa86d1 100644 --- a/frontend/src/hooks/api/useTripPublishMutation.ts +++ b/frontend/src/hooks/api/useTripPublishMutation.ts @@ -15,7 +15,7 @@ export const useTripPublishStatusMutation = () => { mutationFn: patchTripPublishStatus, onSuccess: (_, { tripId }) => { - queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PUBLISHED, tripId] }); + queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PUBLISHED, 'trip', tripId] }); }, onError: () => { diff --git a/frontend/src/hooks/api/useTripQuery.ts b/frontend/src/hooks/api/useTripQuery.ts index 9f494470c..380334e43 100644 --- a/frontend/src/hooks/api/useTripQuery.ts +++ b/frontend/src/hooks/api/useTripQuery.ts @@ -20,7 +20,7 @@ export const useTripQuery = (tripType: TripTypeData, tripId: string) => { const isLoggedIn = useRecoilValue(isLoggedInState); const { data: tripData } = useSuspenseQuery({ - queryKey: ['trip', tripType, tripId], + queryKey: [tripType, 'trip', tripId], queryFn: match(tripType) .with(TRIP_TYPE.PUBLISHED, () => () => getCommunityTrip(tripId, isLoggedIn)) .with(TRIP_TYPE.SHARED, () => () => getSharedTrip(tripId)) diff --git a/frontend/src/hooks/api/useTripShareStatusMutation.ts b/frontend/src/hooks/api/useTripShareStatusMutation.ts index ec65e1560..1bdf1c9c4 100644 --- a/frontend/src/hooks/api/useTripShareStatusMutation.ts +++ b/frontend/src/hooks/api/useTripShareStatusMutation.ts @@ -17,7 +17,7 @@ export const useTripShareStatusMutation = () => { const tripShareStatusMutation = useMutation({ mutationFn: patchTripSharedStatus, onSuccess: (_, { tripId }) => { - queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, tripId] }); + queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, 'trip', tripId] }); }, onError: (error: ErrorResponseData) => { if (error.code === ERROR_CODE.UNAUTHORIZED && error.message) { diff --git a/frontend/src/hooks/api/useUpdateTripItemMutation.ts b/frontend/src/hooks/api/useUpdateTripItemMutation.ts index fb4a0f17a..937f4c53c 100644 --- a/frontend/src/hooks/api/useUpdateTripItemMutation.ts +++ b/frontend/src/hooks/api/useUpdateTripItemMutation.ts @@ -17,7 +17,7 @@ export const useUpdateTripItemMutation = () => { const updateTripItemMutation = useMutation({ mutationFn: putTripItem, onSuccess: (_, { tripId }) => { - queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, tripId] }); + queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, 'trip', tripId] }); }, onError: (error: ErrorResponseData) => { if (error.code && error.code > ERROR_CODE.TOKEN_ERROR_RANGE) { diff --git a/frontend/src/hooks/expense/useExpense.ts b/frontend/src/hooks/expense/useExpense.ts index f8d782040..7d45e38ed 100644 --- a/frontend/src/hooks/expense/useExpense.ts +++ b/frontend/src/hooks/expense/useExpense.ts @@ -12,7 +12,7 @@ import { EXPENSE_CHART_COLORS } from '@constants/expense'; export const useExpense = (tripId: string, tripType: TripTypeData) => { const queryClient = useQueryClient(); - const expenseData = queryClient.getQueryData([`${tripType}expense`, tripId])!; + const expenseData = queryClient.getQueryData([tripType, 'expense', tripId])!; const dates = expenseData.dayLogs.map((data) => ({ id: data.id, diff --git a/frontend/src/hooks/trip/useTrip.ts b/frontend/src/hooks/trip/useTrip.ts index e15b5f934..3269ba966 100644 --- a/frontend/src/hooks/trip/useTrip.ts +++ b/frontend/src/hooks/trip/useTrip.ts @@ -4,7 +4,7 @@ import type { TripData, TripTypeData } from '@type/trip'; export const useTrip = (tripType: TripTypeData, tripId: string) => { const queryClient = useQueryClient(); - const tripData = queryClient.getQueryData([tripType, tripId])!; + const tripData = queryClient.getQueryData([tripType, 'trip', tripId])!; const dates = tripData.dayLogs.map((data) => ({ id: data.id, diff --git a/frontend/src/pages/TripPage/TripMobilePage.tsx b/frontend/src/pages/TripPage/TripMobilePage.tsx index a36862e26..08b063581 100644 --- a/frontend/src/pages/TripPage/TripMobilePage.tsx +++ b/frontend/src/pages/TripPage/TripMobilePage.tsx @@ -30,6 +30,7 @@ const TripMobilePage = ({ tripType }: { tripType: TripTypeData }) => { if (!tripId) throw new Error('존재하지 않는 tripId 입니다'); const { tripData } = useTripQuery(tripType, tripId); + const { dates, places, selectedDayLog, handleDayLogIdSelectClick } = useTripPage( tripType, tripId