사이드바 닫고 열때 현재시간으로 바뀜

대분류

트러블슈팅

기록일자

2024/04/12 06:10

소분류

일정 분류

기록 전

/**
 * useMutation을 이용한 데이터 처리 사용 방법
 * 1. service 폴더에 적절한 supabase의 insert/update/delete를 다루는 함수를 만든다.
 * 2. hooks/useMutation 폴더에 적절한 use~~~~~Mutation 함수를 만든다.
 * 3. 적용하려고 하는 컴포넌트를 client components로 바꾼다 -> "use client";
 * 4. const { mutate: 바꿔줄이름 } = useMetPeopleMutation(); => mutation을 호출한다.2번에서 만든 mutation.
 * 5. 실제 click이 일어나서 데이터를 넣어야 하는 곳에 mutate 함수를 실행한다.
 * 6. 실행이 완료되면(onSuccess), 갱신해야하는 useQuery로 가져온 데이터를 invalidate 처리한다.
 */
TypeScript
복사

useMutation 로직을 이렇게 바꿨더니 해결됌!!! why???

const { mutate: updateMeetingTime } = updateMeetingTimeMutation();

  useEffect(() => {
    const isoStringMeetingTime = selectedMeetingTime.toISOString();
    updateMeetingTime(
      {
        chatRoomId,
        isoStringMeetingTime
      },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({
            queryKey: [MEETING_TIME_QUERY_KEY]
          });
        }
      }
    );
  }, [selectedMeetingTime]);
JavaScript
복사

import { clientSupabase } from '(@/utils/supabase/client)';

// 미팅 시간 추가
export const addMeetingTime = async (chatRoomId: string, isoStringMeetingTime: string) => {
  const { data, error } = await clientSupabase
    .from('chatting_room')
    .update({ meeting_time: isoStringMeetingTime })
    .eq('chatting_room_id', chatRoomId);

  if (error) {
    console.error('미팅 시간 업데이트 실패:', error);
    return;
  }

  console.log('미팅 시간 업데이트 성공:', data);
  return;
};
JavaScript
복사

export const updateMeetingTimeMutation = () =>
  useMutation({
    mutationFn: ({ chatRoomId, isoStringMeetingTime }: { chatRoomId: string; isoStringMeetingTime: string }) =>
      addMeetingTime(chatRoomId, isoStringMeetingTime)
  });
JavaScript
복사

예전 코드

const updateMeetingTimeMutation = useUpdateMeetingTimeMutation();

  useEffect(() => {
    const isoStringMeetingTime = selectedMeetingTime.toISOString();
    try {
      updateMeetingTimeMutation.mutateAsync({ chatRoomId, isoStringMeetingTime });
    } catch (error) {
      console.log('미팅시간 업데이트 오류:', error);
    }
  }, [selectedMeetingTime]);

import { addMeetingTime } from '(@/query/chat/chatQueryFns)';
import { MEETING_TIME_QUERY_KEY } from '(@/query/chat/chatQueryKeys)';
import { clientSupabase } from '(@/utils/supabase/client)';
import { useMutation, useQueryClient } from '@tanstack/react-query';

export const useUpdateMeetingTimeMutation = () => {
  const queryClient = useQueryClient();

  const updateMeetingRoomMutation = useMutation({
    mutationFn: async ({ chatRoomId, isoStringMeetingTime }: { chatRoomId: string; isoStringMeetingTime: string }) =>
      await addMeetingTime({ chatRoomId, isoStringMeetingTime }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: MEETING_TIME_QUERY_KEY });
    }
  });

  return updateMeetingRoomMutation;
};

4. addMeetingTime 함수

// 미팅 시간 추가
export const addMeetingTime = async ({
  chatRoomId,
  isoStringMeetingTime
}: {
  chatRoomId: string;
  isoStringMeetingTime: string;
}) => {
  await clientSupabase
    .from('chatting_room')
    .update({ meeting_time: isoStringMeetingTime })
    .eq('chatting_room_id', chatRoomId);
};
JavaScript
복사

이게 예전 코드야. const updateMeetingTimeMutation = useUpdateMeetingTimeMutation();

useEffect(() => { const isoStringMeetingTime = selectedMeetingTime.toISOString(); try { updateMeetingTimeMutation.mutateAsync({ chatRoomId, isoStringMeetingTime }); } catch (error) { console.log('미팅시간 업데이트 오류:', error); } }, [selectedMeetingTime]);

import { addMeetingTime } from '(@/query/chat/chatQueryFns)'; import { MEETING_TIME_QUERY_KEY } from '(@/query/chat/chatQueryKeys)'; import { clientSupabase } from '(@/utils/supabase/client)'; import { useMutation, useQueryClient } from '@tanstack/react-query';

export const useUpdateMeetingTimeMutation = () => { const queryClient = useQueryClient();

return updateMeetingRoomMutation; };

addMeetingTime 함수

// 미팅 시간 추가 export const addMeetingTime = async ({ chatRoomId, isoStringMeetingTime }: { chatRoomId: string; isoStringMeetingTime: string; }) => { await clientSupabase .from('chatting_room') .update({ meeting_time: isoStringMeetingTime }) .eq('chatting_room_id', chatRoomId); };

useUpdateMeetingTimeMutation 훅을 사용하여 Mutation을 호출하고 있습니다.이 훅은 각각의 호출에 대해 독립적인 Mutation 객체를 반환합니다.따라서 각 호출이 서로 독립적으로 관리되며, 이로 인해 사이드바가 열리고 닫힐 때 새로운 Mutation이 생성되어 이전 Mutation을 덮어씁니다.이는 사이드바가 열리고 닫힐 때마다 Mutation이 새로 생성되어 현재 시간으로 업데이트되는 문제를 초래합니다.

이에 비해 수정된 코드에서는 useMutation 훅을 사용하여 Mutation을 직접 관리하고 있습니다. 이렇게 하면 각 호출이 독립적으로 관리되지 않고, 한 번 생성된 Mutation이 재사용되어 이전 Mutation을 덮어씁니다. 따라서 사이드바가 열리고 닫힐 때마다 새로운 Mutation이 생성되는 것이 아니라, 이전 Mutation이 재사용되어 현재 선택된 시간으로 업데이트됩니다. 이로 인해 문제가 해결되었습니다.