[에러 해결] 데이터 업데이트 안 되는 문제 해결

useQuery 훅을 사용할 때는 쿼리 키를 의존성 배열로 설정해서, 특정 인자가 변경되는 경우도 고려해주어야 한다.

쿼리 키를 동일하게 부여하게 되면 추가적으로 데이터를 불러와야 하는 상황에 데이터를 불러오지 않는다.

예를 들어서, 프로젝트 아이디가 변경되었을 때 다른 데이터를 불러와야 한다면, 의존성 배열에 프로젝트 아이디를 추가해주어야 한다.

그래야, 프로젝트 아이디가 변경됐을 때 서버로부터 데이터를 제때 불러올 수 있는 것이다.

 

하지만, 모든 쿼리에 동일한 쿼리 키를 설정해 줘서 문제가 생긴 적이 있다.

그 상황에 대해서 조금 더 자세히 알아보자.

 

평가 탭에서는 프로젝트마다 중간/최종 평가를 보여주게 된다.

그래서, 평가 탭 링크를 눌러서 평가 페이지에 접속한 경우, 바로 서버에서 차트와 랭킹 데이터를 받아와서 사용자에게 보여줘야 한다.

이때, useQuery 훅을 사용했는데, 처음에 작성한 쿼리 문은 다음과 같다.

const { data = { charts: [], ranks: [] } } = useQuery(
    isCompleted
      ? ["managementFinalEvaluationChartAndRanking"]
      : ["managementMidEvaluationChartAndRanking"],
    () =>
      isCompleted
        ? getFinalEvaluationChartAndRanking(projectId)
        : getMidEvaluationChartAndRanking(projectId)
  );

 

안타깝게도, 프로젝트 아이디를 의존성 배열로 추가해주지 않아서, 1번 프로젝트 평가 탭에 접속했다가 2번 프로젝트 평가 탭에 접속하는 경우 1번 프로젝트 평가 랭킹과 차트가 남아있게 되었다.

 

그래서, 뭐가 문제인지 계속해서 찾아보다가, 쿼리 키를 잘못 설정한 것을 알게 되었다.

아래와 같이 코드를 변경해 주었더니 정상적으로 잘 작동했다.

const { data = { charts: [], ranks: [] } } = useQuery(
    isCompleted
      ? ["managementFinalEvaluationChartAndRanking", projectId]
      : ["managementMidEvaluationChartAndRanking", projectId],
    () =>
      isCompleted
        ? getFinalEvaluationChartAndRanking(projectId)
        : getMidEvaluationChartAndRanking(projectId)
  );

 

이런 실수는 이제 하지 말자.