[트러블 슈팅] suspense, tanstack qeury 오류 - 100-hours-a-week/4-bull4zo-fe GitHub Wiki

suspense, tanstack query 오류(6/20)

🐞 에러 내용

• 기존 useQuery로 선언되었던 쿼리들에서 suspense설정을 true로 변경해서 설정하니, 동작은 하지만, 타입 에러가 계속해서 검출됨

🔍 원인 분석

• tanstack query는 v5부터 useQuery와 suspense 의 혼용을 막기 위해 설정을 분리하고, suspense전용 useSuspense 쿼리를 사용하길 권장했다.

✅ 해결 방법

• suspense로 트리거가 되어야할 훅들은 useSuspense 계열의 쿼리로 변경하고, enable의 설정을 제거했다. suspense쿼리의 경우 enable이 존재하지 않았기 대문이다.
• 그러나, 이 로그인 여부와 같은 반드시 확인 되어야하는 데이터가 누락된 채로 불필요한 요청이 발생하는 경우가 존재했고, 이를 해결하기 위해 appLayout에서 기본 적으로 login여부를 확인하는 보완 로직을 추가했다.

🤔 향후 대응 방안

• 추가적으로 렌더링 성능 개선을 위한 lazy loading, preloading을 적절히 사용해 렌더링 성능의 향상을 노릴 수 있고, 비동기 데이터의 로딩 시간에 따라 로딩 스피터 or 스켈레톤UI가 선택적으로 적용되도록 개선이 가능할 것 같다.

💬 회고

• suspense를 처음 사용해봤기 때문에 좋은 공부였다.