queryKey불일치로 인한 myTrip 상세정보 페이지 오류 수정 (#769)

* refactor: queryKey불일치로 인한 myTrip 상세정보 페이지 오류 수정 * refactor: queryKey 불일치로 인해 myTrip에서 발생한 오류 수정 * fix: 실패할 수밖에 없는 테스트코드 수정 * refactor: invalidateQueries 시 queryKey 불일치문제로 인한 오류 수정
woowacourse-teams · Dec 24, 2023 · a5aef12 · a5aef12
1 parent 61d4aa6
commit a5aef12
Show file tree

Hide file tree

Showing 15 changed files with 16 additions and 15 deletions.
diff --git 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
@@ -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
@@ -16,7 +16,7 @@ export const useCommunityTripQuery = (tripId: string) => {
  const isLoggedIn = useRecoilValue(isLoggedInState);
 
  const { data: communityTripData } = useSuspenseQuery<TripData, AxiosError>({
- 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
@@ -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
@@ -20,7 +20,7 @@ export const useDeleteTripItemMutation = () => {
  const deleteTripItemMutation = useMutation({
  mutationFn: deleteTripItem,
  onMutate: ({ tripId, itemId }) => {
- const tripData = queryClient.getQueryData<TripData>([TRIP_TYPE.PERSONAL, tripId]);
+ const tripData = queryClient.getQueryData<TripData>([TRIP_TYPE.PERSONAL, 'trip', tripId]);
 
  queryClient.setQueryData<TripData>([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
@@ -27,7 +27,7 @@ export const useExpenseQuery = (tripId: string, tripType: TripTypeData) => {
  }
 
  const { data: expenseData } = useSuspenseQuery<ExpenseData, AxiosError>({
- 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
@@ -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
@@ -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
@@ -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
@@ -20,7 +20,7 @@ export const useTripQuery = (tripType: TripTypeData, tripId: string) => {
  const isLoggedIn = useRecoilValue(isLoggedInState);
 
  const { data: tripData } = useSuspenseQuery<TripData, AxiosError>({
- 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
@@ -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
@@ -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
@@ -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<ExpenseData>([`${tripType}expense`, tripId])!;
+ const expenseData = queryClient.getQueryData<ExpenseData>([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
@@ -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<TripData>([tripType, tripId])!;
+ const tripData = queryClient.getQueryData<TripData>([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
@@ -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