React Query의 onSuccess를 이용한 낙관적 업데이트 및 에러 처리

 

* 구현해야 했던 부분

res.code의 응답 값이 200이 아닌경우는 결국 오류이기 때문에 이 경우 낙관적 업데이트를 취소 해주어야 했음.

화면 ui 부분은 컴포넌트 파일에 있고, api 호출 부분은 리액트 쿼리 훅에 있어서 이 부분을 넘겨주는 법에 대해 고민함.

 

 

+) 알게 된 새로운 정보

리액트 쿼리 훅 안에서도 onSuccess를 하고, 외부에서도 호출하며 한 번 더 처리 했더니, api는 잘 호출됐는데 오류가 떴다.

이유를 보니 사용한 적 없는 res2 변수의 비동기 오류였다. (res2를 선언 전 참조했다는 오류)

 

res2 변수를 사용한 적이 없어 콘솔 찍으며 이유를 찾아봤다..

같은 훅의 onSuccess에서 같은 변수를 참조 호출한다면 내부적으로 순서에 따라 번호를 매겨주는 듯 하다.

 

나 같은 경우는 api 응답 코드로 오류 처리를 하기 위해서 api 응답 값으로 res를 받고 토스트로 에러 문구를 표현해주었는데,

이 과정에서 첫 번째로 처리되는 onSuccess의 res가 비동기라 처리 안된 상태에서 두번째 onSuccess가 호출되니, 비동기 문제가 생겼고 res2라는 임의의 내부 변수가 생성된 것이다.

 

 

⭐️ 수정한 방법

1. onSuccess에서 res.code가 200이 아니면 throw Error해줌 (api 요청이 실패한 것은 아니기 때문에 onError에 들어가지 않음!)

2. 컴포넌트 내부에서는 try/catch문을 활용했음.

throw Error해준 에러를 catch 문에서 잡기 때문에, 여기에 낙관적 업데이트 취소 로직을 구현해줌

 

 

+) 문제 해결이 쉽게 되지 않았던 이유

async/await 구문 안에 then으로 체이닝을 해주었더니, try/catch문에서 예상처럼 동작하지 않아서 async/await 구문으로 통일해주었다.

 

 

* 느낀점

1) 리액트쿼리 onSuccess 구문을 훅이랑 호출할 때 둘 다 구현해주고, 비동기로 같은 변수를 호출하면 내부적으로 번호를 매겨주는 것이 신기했다. 

2) 요청이 실패 한 것은 아니니 onError 구문에 넣어주면 안된다.

3) throw Error 해주고 catch로 잡아서 취소해주는 부분이 제일 큰 포인트 였던 것 같다.

4) async/await 구문과 then 구문을 혼동하면 에러 잡기 힘들다!