useQuery 2

[React] React-Query useMutation Hook 사용 시 비동기 처리Issue

비회원 장바구니 기능 구현 중 비동기 처리 관련하여 Issue가 있었다. 기존에는 회원만 장바구니 추가, 장바구니 조회가 가능하여 API 호출 시 Session 정보가 없으면 401을 응답했다. 내가 생각한 비회원 장바구니 기능 로직은 다음과 같다. 1. 로그인이 되어있지 않은 상태에서 장바구니에 상품 추가 시 localStorage를 사용한다. (새로고침 시 데이터를 유지하기 위함) 2. 로그인이 되어있지 않은 상태에서 장바구니 페이지로 접근 시, localStorage에 있는 데이터를 사용한다. (결제 시에는 로그인 필요.) 3. 비회원 장바구니에 상품이 있는 상태에서 로그인 시, localStorage에서 상품 데이터를 가져와 API에 POST해준다. 이후 localStorage 데이터를 clear..

React.js 2022.09.23

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

useQeury & Typescript 사용 시request가 반환하는 Promise의 타입을 정확히 명시해 주어도 useQuery Hook이 반환하는 데이터 타입에 undefined가 포함되어있는 이슈가 있다면 isSuccess를 활용하여 해결할 수 있습니다. React-Query의 useQuery Hook을 Typescript와 함께 사용할 때 useQuery Hook이 반환하는 데이터 타입에 기존에 정의한 타입과 함께 undefined가 포함되어있는 이슈가 있었다. 받아온 데이터를 하위 컴포넌트의 props로 전달해주는 과정에서 전달하는 데이터의 타입이 undefined 일 수 있고, 하위 컴포넌트에서 선언한 받아오는 props의 타입과 일치하지 않아 에러가 발생했다. 데이터는 비동기적으로 내려오고..

React.js 2022.08.05