[Next.js] 랭킹 시스템 점수 집계시 달성자 리스트가 null로 뜸

💥 일정 종료시 랭킹 점수 집계를 위한 함수가 계속해서 0을 반환하는 오류

문제 상황

• 일정 종료 시점에서 그룹 랭킹 점수를 계산하기 위해 계산기 함수를 실행하는데 점수 집계가 정상적으로 동작하지 않음.
• 계속해서 0점으로 표시되어 집계가 됨. (조건을 충족했음에도)
  
  

원인 분석

1. 함수가 실행되는지 console 확인
2. 계산기 함수 내에 전달되는 인자가 제대로 된 값인지 확인

        const score = calculateScore(member.length, achievers, {
          start_time: schedule.start_time,
          end_time: schedule.end_time,
        });
        setStudyScore(score);

해결 방안과 선택 이유

• console 출력 결과 함수 인자 중 achievers 가 null로 반환되는 것을 확인
  
• 쿼리 무효화 후 계산 함수를 실행하는데 이 부분에서 쿼리 무효화 이후 데이터 받아오기 전에 계산기 함수가 실행되는 것으로 파악됨

  const handleScheduleEnd = async (schedule: Tables<"calendar">) => {
      try {
        console.log("스케쥴", schedule);
        // 1. 달성자 목록 새로 가져오기
        await queryClient.invalidateQueries({
          queryKey: ["achievers", studyId, schedule.calendar_id],
        });

• invalidateQueries 말고 refetch 옵션을 사용하여 확실하게 최신 데이터를 패칭 후 계산 함수가 동작할 수 있도록 처리.

    const handleScheduleEnd = async (schedule: Tables<"calendar">) => {
      try {
        const { data: achievers = null, error } = await refetchAchievers();
        if (error) {
          console.error("Achiever refetch error:", error);
          return;

• 해당 과정을 진행하여 계산 함수가 정상적으로 동작하고 일정 종료 후 랭킹 점수가 집계되는 것을 확인했습니다.
  
  

성과 및 교훈

• refetch 를 많이 사용을 해보지 않아서 새 데이터가 필요할 때 무조건 invalidateQueries 를 사용하고 있었는데 해당 오류를 통해 invalidateQueries 와 refetch 사용해야하는 경우의 차이점에 대해 느낄 수 있었습니다.