트러블 슈팅_slam-talk(3)

문제

배포한 이후 모바일 브라우저 환경에서 댓글 작성 기능이 작동하지않는다는 제보를 받았다.

분석 1

제보를 받은 직후에 직접 해당 부분을 작동했을 때 문제가 발생하지않았다.
-> 제보자의 모바일 환경에 문제 있다는 방향으로 문제 원인을 찾으려했다.

1.제보자의 모바일 환경은 아이폰이였고 사파리 브라우저가 문제가 아니였을까?
-> 제보자는 아이폰이긴 했지만, 크롬 브라우저를 사용했다.
2. pc 사파리 브라우저에서도 같은 문제가 발생
3. 첫번째 댓글 작성시도 이후에 모든 시도들이 댓글 작성에 실패하였다.

분석 결과: 위 내용을 토대로 댓글 작성 api 요청을 하고, 업데이트된 댓글 목록을 보여주기 위해 페이지를 리로딩하는 구조가 문제라고 판단

시도 1

댓글 작성 함수를 추가적으로 비동기처리하여 api 요청이 완료되면, 페이지 리로딩을 동작하도록 수정했다.

const handlePostComment = async () => {
  ...
await postCommunityComment.mutate();
      setComment('');

두가지 경우만 봤을 때 해결책이 됐을것 같지만, 다른 컴포넌트와 렌더링이 맞불려서 인지 해결하지 못했다.

시도 2

해당 프로젝트는 게시글 정보 get 요청안에 댓글 정보도 함께 받아오는 구조였다. 댓글을 작성해도 게시글을 받아오는 요청으로만 유저에게 업데이트된 댓글 목록을 보여줄수있다. 그래서 react-query로 처리하도록 변경하였고, 라이브러리 내에 refetch 기능을 활용하였다.

 const {
    data: articleData,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ['articleData'],
    
    ...
    
    const postCommunityComment: any = useMutation({
    mutationKey: ['postComment'],
    mutationFn: () => postComment(commentData),
    onSuccess: () => refetch(),
  });

작성 post 완료시에 get요청을 refetch하는 구조로 변경하였고, 로딩없이 댓글 목록을 업데이트 할 수 있다.