TanStack Query 2

[MeranGo] 무한스크롤 구현 중 queryKey로 인한 데이터 누락

증상TanStack Query의 Infinite Queries사용하여 커서 기반 무한스크롤을 적용하고목록 페이지에서 데이터를 불러오지 못하는 현상이 발생했다.이전에는 useQuery로 목록 조회를 구현했을때는 정상적으로 동작했지만 useInfiniteQuery적용 후 문제가 발생했다.원인API함수 내에 콘솔을 찍어보고 ReactDevTools로 쿼리키가 어떻게 동작하는지 비교해보았다.// api/party-api.tsexport const getInfiniteParties = async ({ client, partyType, keyword, cursor, limit = 15,}: getPartiesParams) => { console.log('query', { partyType, keyword..

트러블슈팅 2025.12.11

[MeranGo] 폼 제출 시 초기값만 전송되는 문제

증상구인하기 폼에서 폼 값(제목,설명)을 입력하고 제출 시 DB에는 초기값(빈 값)만 저장되는 문제가 있었다.폼 제출 시 formdata콘솔을 확인해보니 빈 문자열이 들어가고 있는 상태였다.원인addRecruit함수가 formData를 인자로 받으니까 당연히 useMutation에서도 인자를 넣어줘야 된다고 생각해서 아래와 같이 작성했다.export const useAddRecruitMutation = (formData: RecruitForm) => { return useMutation({ mutationFn: () => addRecruit(formData), ... });};훅은 렌더링 시점에 호출되기 때문에 위 훅이 호출될 때의 formData가 클로저로 인해 초기값으로 고정되어 폼 데..

트러블슈팅 2025.12.09