한 컴포넌트 내에서 같은 테이블을 참조하지만 불러오는 데이터의 양이 다르면서 불일치 발생
const {
data: reservationsData,
error,
isPending
} = useQuery<
(Tables<'payments'> & {
users: { id: string };
posts: {
id: string;
user_id: string | null;
title: string;
image: string | null;
price: number | null;
startDate: string | null;
endDate: string | null;
};
})[]
>({
queryKey: ['reservations', userId],
queryFn: () => fetchReservations(userId),
enabled: !!userId
}); const handleChat = (post: Tables<'posts'>) => {
const postAuthorId = post.user_id;
const query = new URLSearchParams({
postId: post.id,
postTitle: post.title || '',
postImage: post.image || ''
}).toString();
router.push(`/${userId}/${postAuthorId}/chatpage?${query}`);
};Partial<T> 사용:
만약 전체 타입이 필요한 경우, 일부 필드만 있을 수 있다는 점을 반영하기 위해 Partial<T>를 사용하여 타입을 유연하게 만듭니다.
const handleChat = (post: Partial<Tables<'posts'>>) => {
const postAuthorId = post.user_id;
const query = new URLSearchParams({
postId: post.id || '',
postTitle: post.title || '',
postImage: post.image || ''
}).toString();
router.push(`/${userId}/${postAuthorId}/chatpage?${query}`);
};post 객체의 필드가 선택적임을 의미합니다. 모든 필드가 반드시 존재하지 않아도 됩니다.
채팅 리스트 페이지에서 채팅 목록이 없을 시 무한 로딩 화면이 나오고 만들어둔 빈페이지UI가 안나오던 문제
const {
data: chatData,
error: chatError,
isPending: chatPending
} = useQuery<Message[]>({
queryKey: ['chatList', userId],
queryFn: async () => {
const response = await axios.get(API_MYPAGE_CHATS(userId));
return response.data;
},
refetchInterval: 1000
});기존에는 1초마다 리패치를 통하다보니 pending상태가 계속 유지되던 부분이 문제였기 때문에
const {
data: chatData = [],
error: chatError,
isPending: chatPending
} = useQuery<Message[]>({
queryKey: ['chatList', userId],
queryFn: async () => {
const response = await axios.get(API_MYPAGE_CHATS(userId));
return response.data;
},
refetchInterval: false
});위와 같이 기본값을 false로 설정 한 후
useEffect(() => {
if (chatData.length > 0 && !intervalId) {
const id = setInterval(() => {
queryClient.invalidateQueries({
queryKey: ['chatList', userId]
});
}, 1000);
setIntervalId(id);
}
return () => {
if (intervalId) clearInterval(intervalId);
};
}, [chatData, queryClient, userId, intervalId]);useEffect를 통해 시간을 새롭게 설정 후
const {
data: postData = [],
error: postError,
isPending: postPending
} = useQuery<Post[]>({
queryKey: ['postDetails', postIds],
queryFn: async () => {
const postDetails = await Promise.all(postIds.map((postId) => fetchPostDetails(postId)));
return postDetails;
},
enabled: postIds.length > 0
});
const {
data: userData = [],
error: userError,
isPending: userPending
} = useQuery<User[]>({
queryKey: ['userDetails', userIds],
queryFn: async () => {
const userDetails = await Promise.all(userIds.map((id) => fetchUserDetails(id)));
return userDetails;
},
enabled: userIds.length > 0
});추가적으로 채팅 외에 필요한 투어 정보 및 유저 정보
const {
data: postData = [],
error: postError,
isPending: postPending
} = useQuery<Post[]>({
queryKey: ['postDetails', postIds],
queryFn: async () => {
const postDetails = await Promise.all(postIds.map((postId) => fetchPostDetails(postId)));
return postDetails;
}
});
const {
data: userData = [],
error: userError,
isPending: userPending
} = useQuery<User[]>({
queryKey: ['userDetails', userIds],
queryFn: async () => {
const userDetails = await Promise.all(userIds.map((id) => fetchUserDetails(id)));
return userDetails;
}
});기존 enabled조건을 삭제하여 정상적으로 로딩 및 빈화면 구별 성공
빈 화면 스크롤 생기는 등 높이가 너무 큰 문제
h-screen을 min-h-[calc(100vh-400px)]로 대체하여 Tailwind CSS에서 특정 높이를 설정하기 위해 사용되는 방법을 활용
100vh는 뷰포트 높이(Viewport Height)의 100%를 의미합니다. 예를 들어, 브라우저 창의 높이가 800픽셀(px)이라면 100vh는 800px입니다.
따라서, calc(100vh - 400px)은 뷰포트 높이에서 400픽셀을 뺀 값을 통하여 UI구현
