[Today I Learned] reactquery 데이터 불러오기

ts에서 react query를 사용하려면 타입지정은 필수이다.

  const {
    isLoading,
    data: cityItem,
    refetch,
    error,
  } = useQuery<DetailResponse>('getCityTourInfo', () => {
    return getCityTourInfo(id, RanNumber);
  });

타입 지정한 는 types 폴더안에 타입지정을 해두었다.
가져올 공용 api의 데이터구조에 맞게 타입을 지정하였고 useQuery에 선언을 했다.

export interface DetailResponse {
response: {
  header: {
    resultCode: string;
    resultMsg: string;
  };
  body: {
    items: { item: Item[] };
    numOfRows: number;
    pageNo: number;
    totalCount: number;
  };
};
}

데이터의 뎁스가 너무 깊다보니 하위객체까지 접근 후 변수에 할당하는 하였다.

const filterdData = cityItem?.response.body.items.item;

가공한 변수를 map으로 돌려서 원하는 데이터 키값을 뽑아낼 수 있다.