로그아웃해도 Header가 로그인 상태로 남는 이유(해결)

문제

- 로그아웃해도 Header에 로그아웃 된 상태로 즉시 적용 되지 않는 것을 발견

 

문제 파악 과정

1. 대략적으로 Header.tsx의 상태관리문제 일 것으로 생각하고, 아마 로그아웃시 상태관리 캐시가 제대로 초기화되지 않았을까 추측하여 Header.tsx 코드를 확인

 

2. 추가적으로 콘솔에 에러가 뜨는 것을 확인

 

3. 확인 결과 서버엑션에서 로그인 여부 확인 부분에서 에러가 발생하고, useLogout의 아래부분이 문제인 것을 확인

 

 

 

4. 내가 생각한 로그인/로그아웃 플로우 차트

 

알람 useQuery와 프로필 useQuery에 enable을 사용하여, 실행 전 useUser로 로그인 여부를 확인하고 로그인 했을 때만 실행이 되도록 함. 그래서 위 처럼 동작하는 것으로 이해했음

 

5. 실제 동작하는 부분(잘못 이해한 부분)

 

4번까지는 생각하던대로 정상동작하나 5번부터 잘못 이해함.

invalidateQueries로 대략적으로 캐시를 초기화 하고 끝낸다고 생각했으나 실제로는 refetch 동작으로 구독중인 useQuery가 있을 시 다시 한번 실행함.

useNotification이 다시 실행될때, useUser로 로그인 여부를 파악하는데 이때 캐시에 user 캐시가 남아 있어서 enable이 true를 반환하고 서버세션은 로그아웃 상태임에도 불구하고 useNotification이 실행이 됨.

그런데 서버 세션에서는 세션을 찾을 수 없으므로 로그인 정보를 찾지 못하고 에러를 반환 하는 것으로 문제를 파악함

 

 

해결

 

로그아웃 즉시 setQueryData를 하여 user 세션을 null로 세팅하고 나머지는 remove로 세션을 지움

-> user 캐시만 set을 한 이유 : user도 remove가 정석이지만 useUser가 불필요하게 실행될 수 있다고 생각하여 null로 셋팅

 

 

결과

Header에 로그아웃시 즉시 반영 + 콘솔 에러 사라짐 

정상 동작 확인