수파베이스에서 테이블 비교 해서 이미지 출력

A  table

예시

key : uuid, a, b, c, d, e, f

 

B table

key :id, a, content

 

두개의 테이블을 비교 해서 B 테이블의 content 출력하기

 

1. A테이블과 B테이블 연동하기B 테이블에서는 겹치는 키 유니크 설정

2. A 테이블에서 연동할 키 Foreign Keys로 연동

3. 테이블에서 데이터 출력하기(수파베이스)

const [imgW, setImgW] = useState("");
 const handleWalk = async () => {
    const { data, error } = await supabase.from("writedb").select(`
            walk,
            listwalk (
                url
            )
        `);

    if (data) {
      const urls: UrlsType = data.map((item) => item.listwalk);
      const urlArr = Object.values(urls[0]);
      const url = urlArr[0];
      setImgW(url.toString());
    } else {
      console.log(error);
    }
  };

문제 사항 

data의 데이터 모습

[{walk, listwalk:{url}}]

- urls 데이터 형태 {url} 객체 형태  urls.url을 했을 경우 url 타입을 any로 인식 하는 상황 발생

- 객체의 value만 가져오도록 함

- urlArr 의 타입을 확인 후 0번 인덱스 값 가져옴

- string형태로 나오는 것 확인 

- url을 아직도 any로 인식 해서 문자형으로 확실하게 인식 할 수 있도록 함

 

4. 불러온 데이터를 배열로 담기

5. 코드 수정

if (data) {
      const urls: UrlsType = data.map((item) => item.listwalk);
      const urlArr = Object.values(urls[0]);
      const url = urlArr[0];
      console.log(urlArr);
      setImgW(url.toString());
      setImgList((prevList) => [...prevList, url.toString()]); //추가
    } else {
      console.log(error);
    }

 

 

어렵다!!!!!!!!!!!!!!너무 어렵다 재밌다!!!!!!!!!!!!!!속터진다!!!!!!!!!!!!!!!