문제 상황 : WHAT?

• chatgpt에서 답변을 받아올 때, 로드맵 수행 페이지에서 데이터를 읽을 때 캐싱되었던 정보를 가져온다.
• 분명 로컬스토리지에서도 업데이트된 정보가 들어가는데..왜지?

문제 원인 : WHY?

• 아직 리액트 쿼리에 대한 공부가 부족해서 100% 설명은 못하지만
• refetch가 되는 조건들을 보면
  • 쿼리들이 같은 query key를 사용할 경우
  • 알려진 query key가 있을 경우, 어떠한 트리거가 있어야만 데이터를 refetch한다
  • 예를 들어

component remount
window refocus
running refetch function
automated refetch
query invalidation after a mutation

해결 방안 : HOW?

• component remount,window refocus,running refetch function : 해봤는데 안먹거나 이전 정보가 계속 나옴..

• prefetch해오기 : 이전에 불러온 데이터를 가져온다면, 미리 가져오면 현재 데이터와 맞잖아!

• 대신, post list 가 있는 메인 페이지에서 호버를 하면 해당 post를 prefetch해오고, 클릭하면 그 페이지를 열어주는 식으로 코드를 짬. automated refetch나 query invaildation을 통해 refetch 조건을 충족해서 해결한 방안은 아니지만 일단 됨

• prefetch해줄 코드 추가

  useEffect(() => {
    if (currentPage) {
      queryClient.prefetchQuery(['roadmapById', currentPage], () =>
        getRoadmapById(currentPage),
      );
    }
  }, [currentPage, queryClient])

• 해당 카드에 마우스가 올라가면 page의 id를 가져와서 fetch를 해주고, 클릭하면 page 이동

<Image
  src={article.thumbnailUrl}
  alt={`${article.title}.img`}
  height={160}
  width={260}
  style={{ cursor: 'pointer' }}
  onMouseOver={() => {
  	setCurrentPage(article.id);
                          }}
  onClick={() => {
  currentPage &&  navigate(`/roadmap/post/${currentPage}`);
  }}
/>

참고1