TIL #53 | React Query로 데이터를 불러올 때 생긴 오류

마이페이지의 게시글과 프로필을 불러오기 위해 React Query를 사용하면서 현재 유저의 데이터를 가져와야 하기 때문에 저장된 user의 id를 가져온 후, useQuery의 queryFn에 id값을 전달하여 데이터를 가져오는 로직을 짜기로 했다.

이때 실수한 게 있는데, user의 id를 useEffect 안에서 불러와 쿼리로 넘겨줬던 것이다.
useQuery는 refetch 옵션의 기본값이 true이기 때문에 다른 탭을 오갈 때마다 가져온 데이터가 사라지는 현상이 일어났다. 이 이유는 탭을 이동하고 올 때 useQuery는 기본적으로 refetch 되고 useEffect는 다시 실행되지 않기 때문에 useEffect로 user id 값이 가져와지지 않아 데이터가 다 날라간 것이었다.

이런 문제가 일어났을 때의 해결 방법
1) react-query의 옵션인 enbled를 이용하여 userId의 값이 빈 값이 아닐 때만 실행되도록 한다.

  const {
    data: user,
    isLoading,
    isError,
    error,
  } = useQuery({
    queryKey: ["user"],
    queryFn: () => getUserInfo(userId),
    enabled: !!userId, // userId의 값이 true일 때만 실행
  });

2) localStorage에 저장된 값을 가져와 사용한다.

// 문제가 되었던 코드
  useEffect(() => {
    const fetchUser = async () => {
      const { data } = await supabase.auth.getUser();
      setUserId(data.user?.id as string);
    };
    fetchUser();
  }, []);

(getUser() 메서드를 사용하여 값을 가져오는 함수를 useEffect안에서 실행되도록 한 코드)

// 해결된 코드
  const userData = JSON.parse(
    localStorage.getItem("sb-fzdzmgqtadcebrhlgljh-auth-token") as string
  );
  const userId = userData.user.id;

해결 방법을 찾다가 알게 된 것이 있는데 supabase는 기본적으로 유저가 로그인하면 localStorage에 현재 유저 데이터가 저장된다는 것이다.
이를 사용하면 메서드를 사용하여 값을 가져올 필요없이 로컬스토리지에 저장된 유저 데이터를 가져오면 돠기 때문에 더 간단한 방법인 것 같다.

이번 문제 상황에서 가장 문제가 된 것은 useEffect랑 useQuery를 같이 사용한 것인데, useEffect에서 중요한 값을 가져와서 useQuery에 대입하여 사용한다면 꼭 enabled 옵션을 사용하여 빈값이 아닐 때로 처리해주는 것이 좋을 것 같다.
앞으로는 함수 실행 순서에 따른 코드 작성에 유의하면서 문제 해결을 해봐야할 것 같다.