TIL - useSearchParams 사용하기

Problem

---

api를 따로 분리해주려는데 컴포넌트 파일이 아니다보니 useSessionStore로 불러오는 user_id 값이 api파일에서는 연결되지않는다.

 

 

Solve

---

useSearchParams를 사용해서 필요한 페이지에서 매개변수를 만들어 넘겨주자

// UserProfile.tsx
import { useSearchParams } from 'next/navigation';
import { getUserProfile } from '@/app/api/getUserProfileApi'; 

// ... 

export default function UserProfile() {
  const searchParams = useSearchParams(); // useSearchParams 사용
  const userIdFromQueryParam = searchParams.get('user_id'); // 쿼리 파라미터에서 user_id 추출

  // useQuery를 사용하여 사용자 프로필 가져오기
  const { data: userProfile } = useQuery(['userProfile', userIdFromQueryParam], async () => {
    return await getUserProfile(userIdFromQueryParam); // getUserProfile 함수 사용
  });

  // ...
}


//getUserProfileApi.ts
import { supabase } from '../../../supabase/supabaseConfig';

export async function getUserProfile(userId) {
  const response = await supabase.from('users').select('*').eq('user_id', userId);
  return response.data?.[0];
}