[TIL] useQuery 사용중 데이터가 undefined로 뜰때

supabase에 있는 데이터를 가져와서 구현하던 중

처음에는 잘 구현되었으나 로직을 변경하지 않았는데도 새로고침했더니 데이터가 undefined으로 뜨면서 오류가 났다.

// 오류 코드

// 생략

function MyPage() {

// supabase에서 데이터 가져오기
  const selectMapData = async () => {
    const { data: placeData } = await supabase.from('places').select('*');
    return placeData;
  };

// useQuery로 관리하기
  const { data: mapData, isPending } = useQuery({
    queryKey: ['mapData'],
    queryFn: selectMapData
  });
  
  console.log(mapData);
  return (

// 생략

        <StGraphSrollBox>
          {mapData.map((data, index) => (
            <StGraphBox key={index}>
              <StGraphImg style={{ width: '30%' }} src={data.image} />
              <p style={{ width: '30%' }}>{data.name}</p>
              <div>
                <p>{data.st_date}</p>
                <p>~ {data.ed_date}</p>
              </div>
            </StGraphBox>
          ))}
        </StGraphSrollBox>
      </StRightBox>
    </StContainer>
  );
}

export default MyPage;

 

useQuery를 쓸 때는 데이터가 로딩 중일 때 불러와지지 않을 수 있기 때문에 undefined가 뜨는 것으로

로딩중 상태에 nll을 넣어주면 된다. 

이 기능을 하는 것이 isPending 이다.

isPending을 사용하여 로직을 변경하면 아래와 같다.

 

// 오류 코드

// 생략

function MyPage() {

// supabase에서 데이터 가져오기
  const selectMapData = async () => {
    const { data: placeData } = await supabase.from('places').select('*');
    return placeData;
  };

// useQuery로 관리하기
  const { data: mapData, isPending } = useQuery({
    queryKey: ['mapData'],
    queryFn: selectMapData
  });
  
    if (isPending) {
    return null;
  }
  
  console.log(mapData);
  return (

// 생략

        <StGraphSrollBox>
          {mapData.map((data, index) => (
            <StGraphBox key={index}>
              <StGraphImg style={{ width: '30%' }} src={data.image} />
              <p style={{ width: '30%' }}>{data.name}</p>
              <div>
                <p>{data.st_date}</p>
                <p>~ {data.ed_date}</p>
              </div>
            </StGraphBox>
          ))}
        </StGraphSrollBox>
      </StRightBox>
    </StContainer>
  );
}

export default MyPage;

 

해결 !

 

공식문서를 참고하면 더욱 좋다 !

https://tanstack.com/query/latest/docs/framework/react/reference/useQuery