Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor-fe: Tanstack Query 데이터 캐싱 정책 변경 #946

Closed
2 tasks
lurgi opened this issue Nov 12, 2024 · 1 comment
Closed
2 tasks

refactor-fe: Tanstack Query 데이터 캐싱 정책 변경 #946

lurgi opened this issue Nov 12, 2024 · 1 comment
Assignees
Labels
frontend 프론트엔드 refactor 기존 코드 수정

Comments

@lurgi
Copy link
Contributor

lurgi commented Nov 12, 2024

목적

데모데이때 발생한 에러는 다음과 같습니다.

  • 세션이 만료된 토큰으로 Dashboard에 접근 이후 정상적인 토큰으로 Dashboard에 접근하면 정상적인 렌더링이 발생하지 않는다.

원인은 다음과 같습니다.

  • Tanstack Query에서 Error를 캐싱하고, 데이터 요청 이전 해당 에러 데이터를 사용함에 따라서 에러 페이지로 이동하게 된다.

해당 문제를 해결하기 위한 방법으로 데모데이 때 발생한 문제를 해결한 방법은 다음과 같습니다.

  • gcTime을 0으로 설정하여 캐시데이터를 사용하지 않는다.

이전 방법은 Tanstack Query의 캐싱 기능을 사용하지 못한다는 문제가 생깁니다. 이는 Tanstack Query의 강력한 기능을 사용하지 않는 것이라 생각하고, 렌더링에서의 사용성 역시 떨어뜨리는 문제라 판단했습니다.
따라서 다음과 같은 문제 해결방법을 생각했습니다.

  1. 로그인, 자동 로그인시 동적 라우팅으로 /dashboard 라우트로 이동하는 코드를 정적 라우팅으로 변경한다.
    해당 방법을 통해 문제를 해결할 수 있었지만, 기존 로그인 페이지에서 이미 가지고 있는 리소스를 재요청하는 문제가 있었습니다.
  2. 에러 페이지에서 tanstack Query에서 사용하고 있는 데이터를 clear해준다.
    <- 해당 방법을 선택하여 구현하는 것을 제안합니다.

작업 세부사항

  • 에러 페이지에서 tanstack Query에서 사용하고 있는 데이터를 clear해준다.
  • 라우팅 관련 로직 코드 개선

참고 사항

  • 불필요한 로직을 조금 수정하였습니다.

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!


REFAC_TANSTACK_CACHE

@lurgi lurgi added refactor 기존 코드 수정 frontend 프론트엔드 labels Nov 12, 2024
@github-project-automation github-project-automation bot moved this to 할일 in 2024-cruru Nov 12, 2024
@lurgi lurgi changed the title refactor-fe: refactor-fe: Tanstack Query 데이터 캐싱 정책 변경 Nov 12, 2024
@lurgi lurgi self-assigned this Nov 12, 2024
Copy link
Contributor

🚀 안녕하세요 @lurgi님! 작업을 시작하셨군요?

작업하실 브랜치를 컨벤션에 맞게 현재 이슈 ✨refactor-fe: Tanstack Query 데이터 캐싱 정책 변경 ✨에 연결하여 생성헤드렸어요!
생성된 브랜치명:
946-fe-FAC_TANSTACK_CACHE

해당 브랜치가 연결된 ⚡️Draft PR⚡️ 생성되었으니 확인해보세요

작업이 완료된 후, 리뷰어를 선택하고 Draft PR 내부의 Ready for review 버튼을 눌러주시면 됩니다! :)
제가 Slack으로 리뷰어에게 DM으로 알려드릴게요

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend 프론트엔드 refactor 기존 코드 수정
Projects
Status: 완료
Development

No branches or pull requests

1 participant