🔥 등록된 선물 실시간 업데이트가 안 되는 이슈

문제 상황

• 선물 등록 완료 후 선물 등록 홈으로 이동했을 때 아이템이 자동 업데이트가 되지 않는 문제 발생(삭제는 잘 반영됨)

문제 원인

• 선물 등록 화면의 경우 이전에 쿼리에 저장된 선물 리스트 정보가 남아 있어 새로 추가된 선물 리스트를 갱신하지 않는 상황
• 이외에 불필요한 쿼리 키가 여럿 설정되어 있었음

해결 방법

불필요하게 설정되어 있던 mutationKey 값 제거 및 수정된 데이터 자동으로 반영되도록 수정

mutationKey를 지정하지 않더라도 invalidateQueries를 활용하면 특정 쿼리를 무효화해서 해당 쿼리를 다시 부를 때 refetch가 이루어지도록 수정할 수 있어, useMutate 함수에 설정된 불필요한 mutationKey들을 모두 제거했습니다.

invalidateQueries와 refetchQueries 모두 실시간 업데이트를 위해 사용할 수 있으나, 불필요한 네트워크 호출을 줄이기 위해 invalidateQueries로 결정하였습니다. refetchQueries는 호출되는 즉시 refetch가 작동되는 반면, invalidateQueries는 쿼리 키 무효화만 우선 진행하기 때문입니다. 다만 invalidateQueries 사용 시 무효화할 쿼리에 대한 쿼리키를 지정할 때, 요소가 다르면 제대로 반영이 안 되므로 꼼꼼히 체크해야 합니다!

선물홈, 선물방 편집에 쓰이는 delete 관련 서버 통신 코드를 모두 같은 방식으로 수정했습니다.

// useDeleteMyGift.tsx 일부
export function useDeleteMyGift(roomId: number) {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: deleteMyGift,
    onSuccess() {
      console.log('선물 삭제 성공');
// 이 때 쓰이는 쿼리 키는 '내가 등록한 선물 리스트'를 GET 해오는 함수에서 지정해준 쿼리 키와 동일하게 지정해주어서
// 해당 쿼리에 대한 무효화가 진행되도록 합니다.
      queryClient.invalidateQueries({ queryKey: [MY_GIFT_QUERY_KEY[0], roomId] });
    },
    onError: (error) => {
      console.log('선물 삭제 중 에러가 발생했습니다.', error.message);
    },
  });

// useDeleteRoomMember.tsx
export const deleteRoomMember = async ({ roomId, memberId }: DeleteRoomMember) => {
  await del(`/room/${roomId}/members/${memberId}`);
};

const useDeleteRoomMember = ({ roomId }: DeleteRoomMember) => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: deleteRoomMember,
    onSuccess() {
      console.log('삭제 성공');
// 여기에서도 선물방 참여 멤버 리스트를 GET 해오는 쿼리를 무효화하기 위해 쿼리키를 아래와 같이 설정합니다.
      queryClient.invalidateQueries({ queryKey: [...ROOM_MEMBER_QUERY_KEY, roomId] });
    },
    onError: (error) => {
      console.log('선물 삭제 중 에러가 발생했습니다.', error.message);
    },
  });
  return { mutation };
};

📸 스크린샷

⬇️ 내가 등록한 선물 수정된 화면

Screen.Recording.2024-02-10.at.8.30.36.PM.mov

관련 PR

[선물 등록, 선물방 편집] 리액트 쿼리 관련 데이터 실시간 업데이트 문제 해결