react-query 조건에 따라 캐싱 데이터 refetch 구현

개요

블로그 플랫폼에서 북마크 기능 개발을 진행하던 중 react-query 라이브러리를 통하여 서버에서 유저의 북마크 목록을 불러와 현재 북마크 중인지 아닌지를 확인하여 표시하는 기능을 구현하였습니다

 

 

하지만 문제가 발생했는데 react-query의 캐싱 기능때문에 북마크를 한 뒤 다시 리렌더링을 하였을 때 포스트 북마크 표시가 돼지 않는다는 문제가 발생하였습니다. 하지만 그렇다고 캐싱 기능을 끄자니 따로 home에서 리렌더링 되었을 때마다  쓸데없이 요청하는 이슈가 발생될 수 있었고 짧게 refetch 시키자니 성능적으로 문제가 될거라 생각하여 북마크 라는 특정 기능을 수행할 때만 데이터를 받아오는 방법을 고민하였습니다.

 

invalidateQueries

특정 로직을 수행할 때 invalidateQueries를 통해 기존에 있던 query key값을 없애고 새로운 query를 보내 데이터를 받아오는 방식을 사용하였습니다

 

  const queryClient = useQueryClient();

  const bookMarkEventHandler = async (e: React.MouseEvent<HTMLDivElement>) => {
    e.stopPropagation();
    if (...) {
      const result = await 북마크API(id);
      if (북마크 데이터 변경 성공시) {
        setMarked(true);
        queryClient.invalidateQueries(["해당 키값 지우기"]);
      }
    } else {
		...로그인 확인
        ...에러 확인
    }
  };

 

참고

 

 

https://thinkforthink.tistory.com/340

React Query 기본