Til (2023.03.06)

친구기능 트러블 슈팅

 

문제

친구 로직은 useQuery를 사용해 불러온 데이터를 상황에 맞게 filter해주고 useMutation으로 친구 요청, 수락, 삭제등의 이벤트가 일어나는 구조 입니다. 친구 로직 에서 친구 요청 혹은 수락, 삭제, 취소를 누르면 바로 렌더링이 안되는 문제가 있었고 상대방 입장에서도 새로고침을 하지않는 이상 친구 요청 온게 바로 보이지 않았습니다.

 

해결 방법

문제를 해결 하기 위해 우선 useMutation안의 이벤트가 일어난 후 작동하는 onSuccess에 refetchQueries혹은 invalidateQueries를 사용해 요청을 누른 유저 입장에서 바로 업데이트 해줬습니다.

그리고 요청이 오는 상대방 입장에서 바로 확인 할 수 있게 socket.io를 사용해 이벤트를 클릭하면 해당 친구 아이디를 백엔드로 보내고 이벤트를 상대 유저 프론트에게 전달해 쿼리 무효화가 일어나게 하였습니다.

사용될 유저들의 소켓아이디는 "userId/socketId" 형태로 만들고 useEffect로 로그인 하면 소켓을 통해 모두에게 전달되게 해 필요할때 사용할 수 있게 만들었습니다.

이후에 배포해보니 db의 속도가 생각보다 느려 이벤트를 클릭하면 db에 전송되는데 소요되는 시간만큼 버튼이 남아있는 문제가 생겼습니다. 버튼이 남아 있는 만큼 클릭,추가가 가능해 버튼을 없애야 됐습니다.

그래서 각 버튼이 클릭되면 state에 해당 id를 배열의 형태로 추가해 줬습니다.

삼항연산자로 state.find한 값에 아이디가 존재하면 버튼을 없애줬고 그 후 db에 업데이트가 완료 되면 다시 배열의 해당 아이디만 지워주는 방법을 사용했습니다.

그래도 이중저장이 있을까봐 저장할때 db에 해당 데이터가 존재하는지 확인하고 존재하면 예외처리를해 이중저장을 방지했습니다.