✨ feat: 최신포스트 자동 업데이트 및 NEW태그 추가 #318
Conversation
| update: async (): Promise<UpdatePostsApiResponse> => { | ||
| const response = await axiosInstance.get<UpdatePostsApiResponse>("/api/feed/recent"); | ||
| return { |
There was a problem hiding this comment.
P4: 전체적으로 axios동작을 관리하는 부분의 코드들에 API 자원 경로 상수들이 문자열 하드코딩 되어있는데, 이 부분을 별도 상수로 분리해 보는게 문자열에 덜 의존적일 것 같습니다!
There was a problem hiding this comment.
따로 상수처리해서 하나의 파일에서 관리하는게 효율적이게 보이긴 하네요! 준혁님이랑 이야기해보고 수정해보겠습니다.
| export const useUpdatePost = () => { | ||
| const { data, isLoading, error } = useQuery({ queryKey: ["update-posts"], queryFn: posts.update, retry: 1 }); | ||
| return { data, isLoading, error }; | ||
| }; |
There was a problem hiding this comment.
P5: posts.update는 @/api/services/posts에 선언된 axios 동작 함수를 호출하는것인 것 같은데, queryKey는 무슨 역할인지 궁금해요!
There was a problem hiding this comment.
리액트 쿼리에서 API요청에 대한 데이터 식별을 위한 변수랑 비슷한 역할로 쿼리키를 사용합니다. 다른 코드에서 getQuery를 사용하거나 데이터 캐싱에 사용됩니다!
| const handleUpdate = async () => { | ||
| const oldPosts = queryClient.getQueryData<{ | ||
| pageParams: number; | ||
| pages: { hasMore: boolean; lastId: string; result: Post[] }[]; | ||
| }>(["latest-posts"]); | ||
| if (update.data && oldPosts) { | ||
| oldPosts.pages.forEach((oldPost) => | ||
| oldPost.result.forEach((post) => { | ||
| post.isNew = false; | ||
| }) | ||
| ); | ||
| queryClient.setQueryData(["latest-posts"], { | ||
| ...oldPosts, | ||
| pages: [ | ||
| { | ||
| ...oldPosts.pages[0], | ||
| result: [...update.data.data, ...oldPosts.pages[0].result], | ||
| }, | ||
| ], | ||
| }); | ||
| } | ||
| }; |
There was a problem hiding this comment.
P4: 51~56번 라인에서는 React Query를 통해 가져온 oldPosts 데이터들에 isNew 필드를 직접 변경하고 있는데요.
React Query의 데이터는 기본적으로 불변성을 지키도록 권장된다고 합니다. 불변성을 지키지 않는다면 처음에는 마치 정상적으로 동작하는 듯 해 보여도, 참조가 동일한곳에 머물러 있기 때문에 더이상 리액트 쿼리가 옵저버들에게 변경사항을 알릴 수 없다고 합니다. - 참고
그리하여 기존 oldPosts 객체를 수정하지 않고, 새로운 객체를 생성해 업데이트 하는 방식을 사용하는 것이 좋을 것 같은데, 혹시 제가 잘못 이해한부분이 있으면 알려주시면 감사하겠습니다 🙇
There was a problem hiding this comment.
해당 코드를 작성할때 불변성에 대해서는 크게 고민을 안했던거 같습니다. getQuery로 데이터를 불러오고 반환값은 새로운 배열을 만들어서 반환하기 때문에 크게 의미가 있을까 하는 생각에 forEach를 이용해서 isNew를 false로 바꿨었는데 지금보니 forEach보다는 map을 사용해서 새로운 배열을 만들고 데이터를 바꿔주는게 더 괜찮아 보이네요 찾아주셔서 감사합니다!
🔨 테스크
Issue
📋 작업 내용
📷 스크린 샷
2025-01-04.231513.mp4