인프런 커뮤니티 질문&답변

안녕하세요 강의 정말 잘 듣고있습니다.

현재 강의를 무한 중첩 댓글 구현하기까지 수강했습니다!

테스트를 위해 여러가지 사항들을 직접 체크하고있는데 Github로 로그인한 사용자의 정보들(avatar_url, name)들은 기본적으로 사용하지 않고 랜덤한 닉네임과 기본 아바타 이미지가 나오는게 정상 동작일까요?

제가 이해한 흐름은 다음과 같습니다.

1. Github(OAuth) 로그인
2. Supabase Authentication > Users에 사용자 생성 (profile 테이블에는 아직 생성 되지 않음)
3. SessionProvider에서 useProfileData 호출

export default function SessionProvider({ children }: { children: ReactNode }) {
  const session = useSession();
  const setSession = useSetSession();
  const isSessionLoaded = useIsSessionLoaded();

  const { data: profile, isLoading: isProfileLoading } = useProfileData(
    session?.user.id,
  );

  useEffect(() => {
    supabase.auth.onAuthStateChange((event, session) => {
      setSession(session);
    });
  }, []);

  if (!isSessionLoaded) return <GlobalLoader />;
  if (isProfileLoading) return <GlobalLoader />;

  return children;
}

4. fetchProfile(userId) 실행

export async function fetchProfile(userId: string) {
  const { data, error } = await supabase
    .from("profile")
    .select("*")
    .eq("id", userId)
    .single();

  if (error) throw error;
  return data;
}

5. Supabase Table Editor > profile 에는 아무런 결과가 저장되어 있지 않기 때문에
   PostgrestError: PGRST116 에러 발생

6. useProfileData catch 블록 실행 → createProfile 호출

7. 랜덤한 닉네임 + avatar_url이 기본으로 저장

만약 제가 이해한 흐름이 맞다면 어떤 방법을 써야할까요?
제일 먼저 드는 생각은 createProfile에 session을 매개변수로 받아서 session.user.user_metadata.full_name과 avatar_url을 insert에 넣는걸 생각했습니다.

createProfile

export async function createProfile(userId: string, session?: Session) {
  const { data, error } = await supabase
    .from("profile")
    .insert({
      id: userId,
      // ↓ 여기 수정 했어용
      nickname: session?.user.user_metadata?.full_name || getRandomNickname(), 
      avatar_url: session?.user.user_metadata?.avatar_url || null,
    })
    .select()
    .single();

  if (error) throw error;
  return data;
}

use-profile-data.ts

export function useProfileData(userId?: string) {
  const session = useSession();
  const isMine = userId === session?.user.id;

  return useQuery({
    queryKey: QUERY_KEYS.profile.byId(userId!),
    queryFn: async () => {
      try {
        const profile = await fetchProfile(userId!);
        return profile;
      } catch (error) {
        if (isMine && (error as PostgrestError).code === "PGRST116") {
          return await createProfile(userId!, session!); // 여기 session 추가 했어용
        }
        throw error;
      }
    },
    enabled: !!userId,
  });
}

이렇게 코드를 수정하고 profile table을 삭제한 후 다시 Github로 로그인 하면 사용자의 프로필 이미지와 이름이 받아와졌습니다.

더 효율적이거나 더 좋은 방법이 있을까요? 혹은 제가 잘못 알고 있는게 있을까요?