2024.04.04 TIL #채팅 #이전메세지 _더보기

📌 Task TODOLIST

- [x] 이전 메세지 더보기 기능 

- [x] 더보기 버튼 만들기

- [x] 가져올 메세지가 가져오고 싶은 메세지의 갯수보다 적으면? 더보기 버튼 안보이게 

 

---

✨개발 내용

1. 이전 메세지 더보기 기능

Why ?

  처음부터 모든 메세지를 다 불러오면 많은 양의 데이터를 초기에 불러와야 해서 초기 로딩 시간이 길어질 거라고 판단.

How ?

  (1) 아예 처음에는 11개의 메세지만 서버로부터 받아서 CSR 페이징에서 hydration함으로써 초기 로딩 속도 줄이기

  (2) 그 이후 이전 메세지를 더 보고 싶다면, 더보기 버튼 누르기 -> 이전 10개의 메세지 불러오기

what ? 

불러올 메세지 수 상수화

export const ITEM_INTERVAL = 10;

더보기 횟수에 따른 불러올 메세지의 range를 반환하는 utility 함수 getFromTo  생성

export const getFromTo = (loadCount: number, idx: number) => {
  const from = loadCount * (idx + 1);
  const to = from + idx;

  return { from, to };
};

 

초기 서버사이드 컴포넌트인 chat/page.tsx 에서 가장 최신 10개의 메세지만 요청하여, InitChat.tsx 라는 CSR 컴포넌트에 props로 넘겨줌 

const ChatPage = async ({ params }: { params: { chatroom_id: string } }) => {
  const chatRoomId = params.chatroom_id;
  const supabase = serverSupabase();
  const {
    data: { user }
  } = await supabase.auth.getUser();
  const { from, to } = getFromTo(0, ITEM_INTERVAL);
  const { data: allMsgs } = await supabase
    .from('messages')
    .select('*')
    .eq('chatting_room_id', chatRoomId)
    .range(from, to)
    .order('created_at', { ascending: false });

  return (
    <Suspense fallback={<ChatLoading />}>
      <div className="relative flex flex-row">
        <InitChat user={user} chatRoomId={chatRoomId} allMsgs={allMsgs ?? []} /> --> CSR 컴포넌트

 

InitChat.tsx 파일에서는 가져온 메세지들로 초기 쿼리데이터로 setQueryData()

  if (allMsgs) {
        queryClient.setQueryData([MSGS_QUERY_KEY, chatRoomId], [...allMsgs].reverse());
        }

 

2. 더보기 버튼 만들기 + 가져올 메세지가 가져오고 싶은 메세지의 갯수보다 적으면? 더보기 버튼 안보이게 

why?

가져올 메세지가 가져오고 싶은 메세지 갯수보다 많으면 더보기 버튼 보여주고, 적으면 안 보여줘야 하니까

= 변하는 상태구나 = state 만들기

처음에 가져오는 데이터부터 적용이 되어야 하니까 초기 메세지를 setQueryData()를 사용하는  InitChat.tsx에서도 쓰이고,  실제로 더보기 버튼을 누르면 더보기가 되는 LoadChatMore.tsx에서도 쓰이니 전역적으로 관리하자.

=> zustand store 사용

export const chatStore = create<chatState>()((set) => ({
  chatRoomId: null,
  hasMore: false,  ---> 이것
  chatState: true,
  isRest: true,
  searchMode: false,
  imgs: [],
  onlineUsers: [],

  setChatRoomId: (chatRoomId) => set({ chatRoomId }),
  setHasMore: (hasMore) => set({ hasMore }),  ---> 더보기할지 말지 setState하는 함수
  setChatState: (isActive) => set({ chatState: isActive }),
  setisRest: (isRest) => set({ isRest }),
  setSearchMode: () => set((state) => ({ searchMode: !state.searchMode })),
  setImgs: (imgs) => set({ imgs }),
  setOnlineUsers: (onlineUsers) => set({ onlineUsers })
}));

 

How?

- 기본적으로 초기에 메세지를 가져왔는데 더보기 해서 가져올 갯수(11개) 보다 적으면 처음부터 더보기 버튼을 숨겨야 함

 if (allMsgs) {
        queryClient.setQueryData([MSGS_QUERY_KEY, chatRoomId], [...allMsgs].reverse());
        setHasMore(allMsgs.length >= ITEM_INTERVAL + 1);
      }

처음에 가져온 메세지(allMsgs)가 불러올 메세지(ITEM_INTERVAL + 1) 보다 크거나 같아야만 더보기 버튼이 보이자.

 

- 더보기 버튼을 누르면 새로운 메세지들을 불러와야 하고, 가져온 메세지가 불러오고 싶었던 메세지보다 적으면 setHasMore(false)로!

   if (newMsgs.length < ITEM_INTERVAL + 1) {
        setHasMore(false);
        }

 

 

🚨  TroubleShotting

1. 그런데! 이렇게 했더니, 처음 렌더링 시에는 최신 10개가 잘 렌더링 되었지만 그 뒤에 어디를 갔다 오거나 focus out 후 다시 돌아오니 전체 메세지가 와다다 렌더링되는 것!

why? 

초기에는 setQueryData()를 했지만 useSuspenseQuery를 사용하고 있기 때문에 focus out 후 돌아오면  useSuspenseQuery가 실행되면서 전체 메세지를 다시 fetch.

 

What?

export const useMsgsQuery = (chatRoomId: string) => {
  const { data } = useSuspenseQuery({
    queryKey: [MSGS_QUERY_KEY, chatRoomId],
    queryFn: () => fetchMsgs(chatRoomId),
    refetchOnMount: false,
    refetchOnReconnect: false,
    refetchOnWindowFocus: false
  });
  return data;
};

=> 직접 더보기 or invalidate 해야만 이전 메세지를 불러올 수 있도록 자동 refetch되는 옵션 모두 false

 

📚 레퍼런스

setQueryData()

https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientsetquerydata