[React] useQuery Hook이 반환하는 데이터 타입에 undefined가 포함되어있는 이슈

useQeury & Typescript 사용 시request가 반환하는 Promise의 타입을 정확히 명시해 주어도 useQuery Hook이 반환하는 데이터 타입에 undefined가 포함되어있는 이슈가 있다면 isSuccess를 활용하여 해결할 수 있습니다.

 

React-Query의 useQuery Hook을 Typescript와 함께 사용할 때 useQuery Hook이 반환하는 데이터 타입에 기존에 정의한 타입과 함께 undefined가 포함되어있는 이슈가 있었다.

 

받아온 데이터를 하위 컴포넌트의 props로 전달해주는 과정에서 전달하는 데이터의 타입이 undefined 일 수 있고, 하위 컴포넌트에서 선언한 받아오는 props의 타입과 일치하지 않아 에러가 발생했다. 데이터는 비동기적으로 내려오고, 아직 프론트엔드에 있는 것이 아니기 때문에 undefined타입이 같이 선언되는 것이였다. 정상적으로 props 데이터를 내려주기 위해 useQuery Hook이 반환하는 isSuccess를 활용하여 해결할 수 있었다. 

 

 

 function contents(tab: string | string[] | undefined): JSX.Element | undefined {
    if (isSuccessGetAddresses && isSuccessGetLikedProducts && isSuccessGetNumOfCartItem && isSuccessGetUser) {
      const contents: JSX.Element[] = [
        <MyAccount user={userData} addresses={addressesData} />,
        <MyPurchase />,
        <Notifications />,
        <MyVouchers />,
        <MyPoint />,
        <Favorites products={favoritesProps} />
      ]
      return contents[Number(tab)]
    }
  }

위와 같이 서버에서 데이터를 받아오는 작업이 성공한 뒤에 props가 전달된 컴포넌트를 반환해주면 된다.