[트러블 슈팅🔥] invalid input syntax for type uuid : "null" (with supabase)

Trouble Shooting🔥

loginUserId를 받아오는 시점과 사용 시점의 문제

useQuery로 getUserInfo 함수를 통해 userInfo를 호출하는 시점과 EditProfile에서 userId를 호출하는 시점이 모두 비동기처리로 일단 호출부터 헤 -> 이후 값을 이용하자. 이렇게 흘러갔기 때문에 loginUserInfo에 설정된 초기값인 null이 먼저 사용되어 일어난 문제점이었다.

원인 파악 :

1. 기존 getUserInfo 함수를 호출할 때 userId를 사용하여 유저 정보를 가져오고 있다.
2. 그러나 userId 값은 useLoginStore의 loginUserId를 통해 가져오는데, 이 값의 초기값은 null로 설정되어 있다.
3. 따라서 처음 getUserInfo 함수는 초기값 null을 사용하여 API 호출 과정에서 문제가 생겼다.
   → supabase에서는 null 값으로 user_id와 비교하고 있었기에 생기는 문제.

🔥 따라서 getUserInfo 함수가 호출되는 시점이 값이 설정되는 시점보다 빠르기 때문에 발생한 문제이다.

// User(선생님/수강생) 정보 불러오기
export const getUserInfo = async ({ userId }: { userId: string }) => {
  const { data: userInfo, error }: PostgrestMaybeSingleResponse<UserInfoType> = await supabase
    .from('users')
    .select('nickname, email, profile_image')
    .eq('user_id', userId)
    .single();

  if (error) {
    console.error('getUserInfo api error =>', error);
  }

  // zustand에 상태 업데이트
  if (userInfo) {
    useUserStore.getState().setUserInfo(userInfo);
  }

  return userInfo;
};

  const { data: userInfo, isPending } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => getUserInfo({ userId })
  });

문제 해결:

1. useEffect를 사용하여 userId가 변경될 때마다 getUserInfo 함수를 호출하도록 변경
2. 이렇게 함으로써 userId 값이 변경되고 나서야 getUserInfo 함수가 호출되므로, userId로 null을 받아오지 않는다.
3. 이후 userInfo를 상태로 관리하여 API 호출 결과를 상태에 저장

// zustand로 userInfo 상태 관리
  const { userInfo, setUserInfo } = useUserStore();

  useEffect(() => {
    if (userId) {
      const fetchUserInfo = async () => {
        const userInfoData = await getUserInfo({ userId });
        if (userInfoData !== null) {
          setUserInfo(userInfoData);
        }
      };
      fetchUserInfo();
    }
  }, [userId, setUserInfo]);