feat: React Query 사용자 정보 조회 훅 추가
- use-user-query.ts 생성 - Supabase 인증 사용자 정보 자동 캐싱 및 재검증
This commit is contained in:
42
hooks/queries/use-user-query.ts
Normal file
42
hooks/queries/use-user-query.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { createClient } from "@/utils/supabase/client";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [사용자 정보 조회 쿼리]
|
||||||
|
*
|
||||||
|
* 현재 로그인한 사용자의 정보를 조회합니다.
|
||||||
|
* - 자동 캐싱 및 재검증
|
||||||
|
* - 로딩/에러 상태 자동 관리
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* import { useUserQuery } from '@/hooks/queries/use-user-query';
|
||||||
|
*
|
||||||
|
* function Profile() {
|
||||||
|
* const { data: user, isLoading, error } = useUserQuery();
|
||||||
|
*
|
||||||
|
* if (isLoading) return <div>Loading...</div>;
|
||||||
|
* if (error) return <div>Error: {error.message}</div>;
|
||||||
|
* if (!user) return <div>Not logged in</div>;
|
||||||
|
*
|
||||||
|
* return <div>Welcome, {user.email}</div>;
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export function useUserQuery() {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ["user"],
|
||||||
|
queryFn: async () => {
|
||||||
|
const supabase = createClient();
|
||||||
|
const {
|
||||||
|
data: { user },
|
||||||
|
error,
|
||||||
|
} = await supabase.auth.getUser();
|
||||||
|
|
||||||
|
if (error) throw error;
|
||||||
|
return user;
|
||||||
|
},
|
||||||
|
staleTime: 5 * 60 * 1000, // 5분 - 사용자 정보는 자주 변경되지 않음
|
||||||
|
retry: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user