refactor: mypage 리팩토링 #178
Conversation
hakyoung12
requested review from
BeMatthewsong,
HMRyu and
yunchaeney
as code owners
| // QueryClient 인스턴스 생성 | ||
| const queryClient = new QueryClient(); | ||
|
|
||
| // QueryClientProvider로 감싸주는 헬퍼 함수 정의 | ||
| const renderWithQueryClient = (ui: ReactNode, options?: RenderOptions) => | ||
| render( | ||
| <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>, | ||
| options, | ||
| ); | ||
|
|
There was a problem hiding this comment.
myGatherings의 쿼리키관리를 위해 useParticipation함수에 queryClient를 추가했더니 테스트 오류가 났습니다.
useQueryClient를 사용하려면 QueryClientProvider로 감싸줘야 하는데, 현재 테스트에서 이를 설정하지 않아서 발생한 문제였습니다.
그래서 테스트코드에 QueryClientProvider를 추가하였습니다.
There was a problem hiding this comment.
호민님께서 만든 그라데이션을 적용했습니다.
| const handleWithdrawClickWithId = async (id: number, queryKey: string[]) => { | ||
| const { success, message } = await deleteGatheringToWithdraw(id); | ||
|
|
||
| if (!success) { | ||
| toast.error(message); | ||
| return; | ||
| } | ||
| // 쿼리 무효화 함수 | ||
| await queryClient.invalidateQueries({ queryKey }); // querykey 무효화시켜서 취소한 모임 반영하여 최신화 | ||
|
|
||
| toast.success(message); | ||
| setHasParticipated(false); | ||
| }; | ||
|
|
There was a problem hiding this comment.
모임의 id값을 받아와서 모임취소 요청을 하는 함수입니다.
모임을 취소하면 목록에서 바로 반영이 되는 것이 사용자경험에서 좋을 것 같아서
요청이 성공했을 때 캐싱된 데이터를 무효화시켜 최신 데이터를 받아오게 만들었습니다.
| initialData: { | ||
| pages: [ | ||
| { | ||
| hasNextPage: initData.length === DEFAULT_LIMIT, | ||
| offset: DEFAULT_OFFSET, | ||
| data: initData, | ||
| }, | ||
| ], |
There was a problem hiding this comment.
useInfiniteQuery 훅에서 서버사이드로 받아온 초기데이터를 initialData로 적용했습니다.
처음 받아온 데이터의 길이가 DEFAULT_LIMIT과 같다면 다음 데이터를 받아올 수 있게 됩니다.
| const Mygatherings = async () => { | ||
| const myGatherings = await getMyGatherings(); | ||
| const user = await getUserData(); | ||
| return <MyGatheringList initData={myGatherings} user={user} />; |
| offset = DEFAULT_OFFSET, | ||
| limit = DEFAULT_LIMIT, |
There was a problem hiding this comment.
👍
P4) 개인적인 의견인데, 조금 더 구체적으로 네이밍을 하면 더 직관적인 것 같긴 합니다..!
ex)
- DEFAULT_GATHERINGS_OFFSET
- DEFAULT_GATHERINGS_LIMIT
- ...
There was a problem hiding this comment.
저도 더 구체적으로 짜는게 직관적일 것 같아 반영했습니다 감사합니다!
| const renderWithQueryClient = (ui: ReactNode, options?: RenderOptions) => | ||
| render( | ||
| <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>, | ||
| options, | ||
| ); | ||
|
|
| // QueryClientProvider로 감싸주는 헬퍼 함수 정의 | ||
| const renderWithQueryClient = (ui: ReactNode, options?: RenderOptions) => | ||
| render( | ||
| <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>, |
There was a problem hiding this comment.
P4) 궁금해서 여쭤봅니다..!
혹시 {ui} 라고 이름 지으신 이유가 있으실까요??
There was a problem hiding this comment.
큰 의미는 없습니다 사용하려는 테스트 컴포넌트에 기능 없이 ui만 구현해놔서 직관적으로 ui라고 지었습니다!
| // 쿼리 무효화 함수 | ||
| await queryClient.invalidateQueries({ queryKey }); // querykey 무효화시켜서 취소한 모임 반영하여 최신화 |
✏️ 작업 내용
📷 스크린샷
모임취소시 즉시 반영
Oct-11-2024.16-44-34.mov
close #179