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

비회원 장바구니 기능 구현 중 비동기 처리 관련하여 Issue가 있었다.

 

기존에는 회원만 장바구니 추가, 장바구니 조회가 가능하여 API 호출 시 Session 정보가 없으면 401을 응답했다. 

 

내가 생각한 비회원 장바구니 기능 로직은 다음과 같다.

 

1. 로그인이 되어있지 않은 상태에서 장바구니에 상품 추가 시 localStorage를 사용한다. (새로고침 시 데이터를 유지하기 위함) 

2. 로그인이 되어있지 않은 상태에서 장바구니 페이지로 접근 시, localStorage에 있는 데이터를 사용한다. (결제 시에는 로그인 필요.)

3. 비회원 장바구니에 상품이 있는 상태에서 로그인 시, localStorage에서 상품 데이터를 가져와 API에 POST해준다. 이후 localStorage 데이터를 clear한다. 

4. API에서 다시 장바구니 데이터를 get한뒤 Recoil 상태를 최신 장바구니 데이터로 업데이트 해준다. 

 

로그인 시 로직은 handleLogin 함수에서 처리했다. 

 

handleLogin 함수 내에서 

1. localStorage에서 데이터를 가져온 뒤, 

2. useMutaion으로 API에 POST하고,

3. API에서 다시 장바구니 데이터를 가져와 Recoil State에 업데이트 하는 과정에서 비동기 관련 문제가 발생했다.

async await을 사용하여 

2번 과정 이후 3번을 처리했는데, 3번이 먼저 동작한 뒤 2번이 실행되어 업데이트가 정상적으로 이루어지지 않았다. 

 

이유는 다음과 같았다. 

 

react -query의 mutaion에는 async await이 적용되지 않는다.

 

이를 해결하기 위해 다음과 같은 방법을 사용했다.

 

1.useMutation Hook에서 API에서 최신의 장바구니 데이터를 가져온 뒤 Recoil State에 업데이트 해주는 함수를 파라미터로 받았다.

2. mutate의 onSuccess 함수 내부에서 파라미터로 받은 함수를 넣어주었다.

 

결과적으로 비회원 장바구니에 있던 데이터를 POST 해준 뒤, onSuccess 되었을 때 상태가 최신인 새 장바구니 데이터를 가져와 Recoil State에 정상적으로 업데이트 해줄 수 있었다.