퀴즈를 풀고, 목록으로 돌아가기 버튼을 눌렀을 때, 해당 퀴즈를 풀었다는 표시가 나타나지 않는 문제가 생겼습니다.

네트워크탭을 봐도, 해당 페이지로 돌아갔을 때 api 호출을 하지 않고 있습니다.

탠스택 쿼리는, 키 기반으로 캐싱합니다.

즉, 같은키로 api를 요청하게 되면, staleTime(+cacheTime)이 지나지 않은 이상 새로운 api 호출 없이 캐시 데이터를 반환합니다.

현재상황은, 퀴즈 완료 상태가 업데이트 되어야 하므로, 수동으로 캐시를 무효화해야 합니다.

이에 처음에는 퀴즈 제출마다 캐시 무효화를 진행하는 코드를 작성하였습니다.

const handleConfirm = async () => {
  await submitQuizMutation.mutateAsync({ isCorrect });

  queryClient.invalidateQueries(['topics', topicId]);
  
  navigate('/quiz-result');
};

하지만, 이는 목록으로 돌아가지 않고 다음문제를 푸는 상황에서도 무효화를 진행하는 코드가 실행될 것 같습니다. 즉 쓸데없는 네트워크 요청이 발생될 수 있습니다.

이에, 목록으로 돌아가는 버튼을 눌렀을 때 한번만 무효화가 진행되어야 한다고 판단했습니다.

const handleBackToList = () => {
    navigate(`/topics/${topicId}/quizzes`);
    queryClient.invalidateQueries({ queryKey: ['topics', topicId] });
  };

이후 실행결과 퀴즈를 풀고 돌아갔을 때 정상적으로 풀었다는 표시가 반영되어 ui가 나타나는 것을 확인했습니다.