refetchInterval를 통한 데이터 실시간 동기화

 

저번 블로그에 이어서 tanstack-query 관련 블로그를 작성하고자 한다. 현재 메이트 신청까지 API 연동을 완료했고 남은 태스크는 메이트 검색/메이트 해제/메이트와 설정한 운동정보 편집 총 3가지이다. 기술적으로 어려운 부분은 다 끝내서 남은 태스크를 얼렁 끝내고 서비스를 출시하는 것이 목표다 ㅎㅎ:)

 

 

주요 내용은 다음과 같다. 신청을 받은 메이트가 수락을 하면 이제 나의 메이트 페이지에는 메이트의 정보가 조회가 되야한다. 화면을 보면 현재는 메이트가 없는 것을 알 수있다.

 

 

 

아직 상대방이 메이트 수락을 안했기 때문에 메이트가 없다는 UI가 렌더링 되고 있는데 만약 수락을 한다고 생각해보자. 나의 로직은 현재 tanstack-query 기반으로 구현 되어있고 mateInfo라는 키로 메이트 정보를 저장 중이다.

 

 

수락을 한다면 해당 데이터가 업데이트 되어 사용자에게 메이트의 정보를 보여주어야 하는 필요성을 느꼈고 나는 여기서 refetchInterval이라는 개념을 도입했다. 서버의 데이터를 동기화하기 위해 해당 개념을 사용했고 일정 시간을 기준으로 refetch(재요청) 하도록 설정하였다. 또한, 백그라운드에서도 refetch를 하도록 refetchIntervalInBackground를 true로 설정했다.

 

import { getMateInfo } from "@/services/mate/getMateInfo";
import { useTokenStore } from "@/stores/tokenStore";
import { useQuery } from "@tanstack/react-query";

interface MyMateData {
  id: number;
  profileUrl: string;
  nickname: string;
  gender: string;
  age: number;
}

export const useMateInfo = () => {
  const token = useTokenStore.getState().token;

  return useQuery({
    queryKey: ["mateInfo"],
    queryFn: async () => {
      if (!token) {
        throw new Error("인증 토큰이 없습니다. 로그인하세요.");
      }
      try {
        const response = await getMateInfo();
        return response?.data || null;
      } catch (error: any) {
        if (error.response?.status === 401) {
          console.error("인증 실패: 토큰이 유효하지 않음");
        } else {
          console.error("메이트 정보 불러오기 실패:", error);
        }
        return null;
      }
    },
    staleTime: 6 * 10000 * 5,
    refetchInterval: (query) => {
      const data = query.state.data as MyMateData | null;

      if (data?.id) {
        return false;
      }
      return 30000;
    },

    refetchIntervalInBackground: true,
    enabled: !!token,
  });
};

 

하지만 구현을 하면서 사용자 경험 개선에 필요한 부분을 발견했다. query.state.data as MyMateData | null로 현재 데이터를 확인한 뒤 메이트가 존재한다고 판단되면 폴링(재요청)을 중단하도록 하였다. 그리고 메이트가 존재하지 않는다면 30초 마다 재요청을 하도록 구현하였다. 즉, 메이트가 생기면 폴링을 중단하여 불필요한 트래픽과 tanstack-query의 연산 횟수를 줄임으로써 사용자 경험을 개선하고 성능 상의 이점을 가지도록 하였다.(뭔가 더 좋은 방법이 있을거 같은데 고민을 좀 더해보자 준영아)

 

현재 백엔드 팀원께 메이트 신청을 보낸 상태인데 수락하시는대로 업데이트된 메이트 화면을 업로드 예정이다. 조금만 기달려주세요 ㅎㅎ