[React] Suspense와 React-query의 onSuccess

프로젝트에 suspense를 적용하기를 하는 도중 에러가 발생했다.(정확히 에러는 아니고 버그?)

 const { data: chatRoom, isLoading } = useChatRoomQuery(chatRoomId, {
  enabled: isLoggedIn && !!chatRoomId,
  cacheTime: 0,
  onSuccess: (data) => {
    setNewChatLog(data.data.chatRoom.messages);
  },
});

onSuccess가 실행 되었음에도 불구하고 newChatLog에 데이터가 없었다.

이는 Suspense를 적용하면서 생긴 문제인데. Suspense의 동작 순서와 관련이 있다.

<Suspense fallback={<Loading />}>
  <Main />
</Suspense>

1. Suspense mount
2. Main mount (1)
   1. Main의 useQuery(api) 실행
   2. Main unmount
3. fallback mount
4. api 성공 시, onSuccess 메소드 실행
5. fallback unmount
6. Main mount (2)

onSuccess에서 state를 바꾸는 setState함수는 처음 mount된 Main(1)에 있는 함수이다. Main(1)의state를 바꾸는 것이다.

하지만 결국 렌더링 되는건 두번째 Main이므로 onSuccess에서 state를 변경하더라도 반영이 되지 않는다.

그래서 다음과 같이 해결했다.

const chatRoomId = useParams<{ chatRoomId: string }>().chatRoomId as string;
const [newChatLog, setNewChatLog] = useState<IMessage[]>([]);
const { data: chatRoom } = useChatRoomQuery(chatRoomId, {
  enabled: isLoggedIn && !!chatRoomId,
  cacheTime: 0,
  suspense: true,
});

useEffect(() => {
  if (!chatRoom) return;
  setNewChatLog(chatRoom.data.chatRoom.messages);
}, [chatRoom]);