2024.03.20 TIL - supabase에서 배열값에 해당하는 데이터 불러오기

supabase - 배열값에 해당하는 데이터 불러오기

// painter의 지난 그림들 가져오기
export const getDrawingUrls = async (drawingIds: number[]) => {
  const response = await supabase
    .from("posts")
    .select("drawing_url")
    .in("id", drawingIds)
    .then(({ data: postsData, error }) => {
      if (error) throw error;
      const drawingUrls = postsData.map((post) => post.drawing_url);
      return drawingUrls;
    });
  return response;
};

const DrawingsByPainter = ({ drawingIds }: { drawingIds: number[] }) => {
  // 유저가 그린 그림url 배열(지금 그림의 url은 제외해야함)
  const {
    data: drawingUrls,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ["drawingUrls"],
    queryFn: () => getDrawingUrls(drawingIds),
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return <div>Error</div>;
  }

  console.log("drawingUrls", drawingUrls);

  return (
    //...생략

• 코드 설명

위의 코드는 Supabase를 사용하여 주어진 그림 ID 배열에 해당하는 그림들의 URL을 가져오는 함수입니다.

getDrawingUrls 함수는 비동기 함수로, 그림 ID 배열을 매개변수로 받습니다.
함수 내부에서는 Supabase의 from 메서드를 사용하여 "posts" 테이블로부터 데이터를 가져옵니다.
select 메서드를 사용하여 그림 URL인 "drawing_url" 필드만을 선택합니다.
in 메서드를 사용하여 "id" 필드가 주어진 그림 ID 배열에 포함되는 데이터만 선택합니다.
then 메서드를 사용하여 데이터와 에러를 처리합니다. 데이터는 postsData 변수에 저장되고, 에러는 error 변수에 저장됩니다.
에러가 발생하지 않았다면, postsData 배열을 map 메서드를 사용하여 각 포스트에서 그림 URL만을 추출하여 새로운 배열인 drawingUrls에 저장합니다.
최종적으로 함수는 drawingUrls를 반환합니다.
이 함수를 호출하면, 해당하는 그림 ID 배열에 해당하는 포스트들의 그림 URL이 반환됩니다. 이러한 함수를 사용하면 Supabase에서 데이터를 가져와 사용할 수 있습니다.