Kakao 로그인 시 로그인 요청을 2번 하는 이슈

[bigtae1007]

문제 상황

카카오 소셜 로그인을 할 때 백엔드에서 에러 코드가 나오는 것을 보고 확인 해보니 로그인 요청을 2번 보낸다.

문제 원인

정확한 원인을 찾을 수는 없었고 가설을 새워봤다.

1. 첫 요청이 실패해 두 번째 요청을 보내 성공한다.
2. query요청이 2번 간다.

가설 확인

1. 개발자 도구 네트워크에서 순서를 확인 할 수 있지만, 혹시나 하는 마음에 확인을 해봤다. 백엔드에서 나오는 에러 메세지를 보니, 같은 로그인 요청이 2번이라는 것을 확인하고, 첫 요청이 실패했다는 이유는 아니라고 판단.

2. 컴포넌트 내 리렌더링을 일으킬만한 코드가 없었다. usequery에 staleTime을 늘려보니, 에러가 발생하지 않는 것을 보고, 에러 원인이 query 요청이 2번 가는 것으로 확신을 했다.

해결 방법

왜 요청이 두 번가는지에 대한 의문을 품었다 딱히 리렌더링에 대한 문제는 아닌 것 같고, 내가 발견하지 못한 refetching에 대한 이슈가 있을 것 같아. refching을 하는 조건을 옵션으로 막아봤다.

우선 staleTime을 만지는 건 그닥 좋은 선택지는 아닌 것 같아 넘기고, focus 되었을 때 fetch를 하는 refetchOnWindowFocus: false, 옵션을 추가하여 테스트를 해봤더니 해결이 됐다.
어떤 이유에서 focus가 되어 refetch가 되는지 확인 할 수는 없었지만, 해결은 된 것 같다....

---

시간이 없기 때문에 다른 코드를 먼저 작성한 이후 코드에 대해 고민을 하면서 안보이던게 보이기 시작했다.
보통 react-query를 설명하는 걸 보면 useQuery는 create 상황에서 자주 사용하고 이건 get요청일 경우가 많다. 다른 코드를 작성하면서 캐시데이터가 필요한 경우에만 useQuery를 사용했는데, 그 경험을 쌓고 다시 보니 useQuery를 고집할 이유가 있었나 싶었다.

결국 수정된 코드로는 useMutate을 사용해 렌더링이 됐을 때 요청을 보내는 것으로 해결했고, 이런 방법으로 작성하니, 어떤 방법으로 (뒤로가기 등) 로그인 페이지에 다시 접속했을 때 로그인을 했는지 안했는지 판별하고 안했을 경우에만 요청을 보내는 것을 다른 상태관리 등 없이, 편하게 작성 할 수 있었다.