[하루메이트] 일정 수정 기능 중 useQuery 타입 에러 해결, 일정 30개 제한 기능

⭐️ 일정 수정 기능

 

기존에 만들어 놓았던 일정 등록 페이지를 재활용해서 조건부 렌더링으로 일정을 수정할 수 있는 기능입니다.

 

😇 useQuery 타입 에러

const dispatchDestinationList = async () => {
  const response = await GetCourse({
    courseId,
  });
  const { destinationList }: PostReadT = response.data as PostReadT;
  dispatch(scheduleListActions.updateList(destinationList));
};

useQuery({
  queryKey: ['modify'],
  queryFn: dispatchDestinationList,
  refetchOnWindowFocus: false,
  select: (data: { data: PostReadT }) => data.data,
  enabled: isModify === 'true',
});

발생한 에러

 

😄 해결

select: (data: { data: PostReadT }) => data.data,

이 부분에서 에러가 생겼던 것이었습니다.

dispatchDestinationList 함수에서 response를 받고, 거기서 data 속성을 선택해서 구조 분해 할당으로 destinationList라는 변수를 만들어주었습니다.

 

useQuery에서 select는 queryFn에서 반환된 데이터의 일부를 변환하거나 선택하는 데 사용하는 옵션입니다.

그런데 지금의 dispatchDestinationList 함수는 선택할 것이 없는 Promise<void>를 반환합니다.

그런데 select 옵션으로 선택할 것이 없는데 선택을 하라고 했기 때문에 에러를 발생시킨 것이었습니다.

따라서 select 옵션을 삭제함으로써 에러를 해결했습니다.

 

다시 코드를 되짚어보는데 좋지 못한 코드인 것 같다는 생각이 들었습니다.

dispatchDestinationList에서 반환하는 데이터가 없고, useQuery를 사용해서 선언적으로 데이터를 관리하는 것이 아니라 그저 useEffect 대용으로 사용하고 있다는 느낌이 있습니다.

이미 코드에 useEffect가 몇 개 있기도 했고, useQuery를 자주 사용을 안해봐서 한 번 사용해 보자는 생각으로 코드를 작성했지만, 뭔가 본래 의도에 벗어나게 사용한 것 같아 마음 한 구석이 찝찝합니다...

 

🗒️ 해결 코드

const dispatchDestinationList = async () => {
  const response = await GetCourse({
    courseId,
  });
  const { destinationList }: PostReadT = response.data as PostReadT;
  dispatch(scheduleListActions.updateList(destinationList));
};

useQuery({
  queryKey: ['modify'],
  queryFn: dispatchDestinationList,
  refetchOnWindowFocus: false,
  enabled: isModify === 'true',
});

 

---

 

⭐️ 일정 30개 제한 기능