🚨 [queryKey 중복 이슈] - 같은 요청인데 다른 데이터가 들어오는 문제 #Next.js

🚨 문제 발생

`유저id`를 가지고 조건처리, 데이터 조회, 수정 등의 작업을 하는데 버그가 자꾸 발생했다. 콘솔을 찍어보니 `유저id`만 가져오는 요청을 했는데 간헐적으로 `유저 정보 객체`가 들어올 때가 있었다. {id:{UUID}, email:"test@test.com" . . . 어쩌구 . . } . . . 분명 id만 추출해서 반환하도록 작성했는데 어쩔때는 객체가 들어오는게 너무 이상했다.

 

원인

유저 데이터를 불러오는 함수가 2개가 있었다. 유저 데이터를 객체로 받아오는 함수, id만 받아오는 함수가 있었는데 둘이 같은 `queryKey`를  공유해서 생긴 이슈였다. (둘 다 `loginUser`사용) 

 

즉, 객체를 반환하는 함수가 먼저 실행되고 이후 id를 반환하는 함수가 실행될 때 `queryKey`가 `fresh`한 데이터일 경우 객체가 반환되게 된다. (반대의 경우도 마찬가지)

 

💡 해결

간단히 queryKey를 분리함으로 해결했다. 

 

📍 정리

• `react query`, 혹은 next.js의 `fetch` 함수를 사용할 때 캐싱옵션에 대해서 꼭 잘 생각하고 개발하자.
• 그리고 `queryKey`를 각 함수마다 하드코딩으로 작성하지 않도록 주의하자.
• 데이터가 최신화가 안되거나, 좀 말도 안되는 데이터가 들어오는 경우 캐싱 옵션을 꼭 확인하자.