매개변수 쿼리

매개변수화 된 쿼리

쿼리에 매개변수를 제공하여 특정 조건에 맞는 데이터를 가져오는 방식

export const getUserProfile = async ({
  queryKey
}: {
  queryKey: [string, string];
}) => {
  try {
    const [, userId] = queryKey;
    const supabase = createClient();
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', userId)
      .single();

    if (error) {
      return null;
    }
    return data;
  } catch (error) {
    console.error('유저정보불러오기 실패', error);
    return null;
  }
};

원래는
1. 전체의 프로필을 쿼리로 불러온 다음
2. 거기서 내가 찾고자 하는 userId에 맞는 정보를 찾았다
const userProfile = profiles?.find((profile) => profile.id === userId);
이런식으로!!
근데 너무 비효율적인 것 같아서 처음에 데이터 가져올때 내가 원하는 userId를 가진 데이터만 가져오고 싶어서 매개변수화 된 쿼리를 사용.

const {
    data: profiles,
    isLoading,
    isError
  } = useQuery({
    queryKey: ['profiles', userId],
    queryFn: getUserProfile
  });

이렇게 queryKey에 쿼리키이름이랑 매개변수를 전달해준다.
그럼 쿼리함수로 쿼리키를 전달해줄수있게된다!
쿼리함수인 getUserProfile에 매개변수로 쿼리키가 들어간다 [string,string]으로!
const [, userId] = queryKey;
쿼리키의 두번째 인자를 쓰겠다!=queryKey 배열에서 두 번째 요소를 userId로 추출. 요런의미.