리액트 쿼리 useInfiniteQuery 스테이트 변경 시 전체 조회 되는 현상

Question

리액트 쿼리 useInfiniteQuery 사용 문의useInfiniteQuery 사용하여 게시판을 구현하고 있습니다.스크롤 이동 시 api 호출은 잘 되는 것은 확인하였습니다. 4회까지 확인근데 조회 후 게시글에 있는 좋아요 버튼을 누르거나 화면에 리랜더링을 하는 스테이트를변경하게 되면 useInfiniteQuery 다시 호출 됩니다.. export default function Board() { const { user, // anonymousBoardList, subMenuData, tabMenuData, subMenuType, eduInstituteId, pageData, fetchNextPage, hasNextPage } = useAnonymousBoard(); const nav = useNavigate(); const isLike = usePostLike(); const postUserBlock = usePostBlockUser(); const reportUser = usePostReportUser(); const deleteArticle = useDeleteArticle(); const handleOnClickLike = (anonymousBoardNo: number | undefined) => { if (!!anonymousBoardNo && anonymousBoardNo > -1) { isLike({anonymousBoardNo, eduInstituteId}) } } const handleOnClickUserBlock = (blockUserNo: number | undefined) => { if (!!blockUserNo && blockUserNo > -1) { postUserBlock(blockUserNo) } } const handleOnClickReportUser = (reqRepostUser: TReqReportUser) => { reportUser(reqRepostUser); } const handleOnClickDeleteArticle = (anonymousBoard: AnonymousBoard) => { deleteArticle(anonymousBoard); } const handleClickSubMenu = (key: string) => { nav(`/anonymous/board/${key}`, {replace:true}) } const handleClickTabMenu = (key: string) => { nav(`/anonymous/board/${subMenuType}/${key}`, {replace:true}) } return (

{ ((pageData && (pageData.pages[0].list.length)) === 0) ?

아직 쓰여진 글이 없어요

첫번째 글의 주인공이 되어주세요😉

:

<> { pageData ? pageData.pages.map((boardList) => { return boardList.list.map((post, index) => { return ( ) }) }) : <> }

-모든 글을 읽었습니다:)-

}

{!!user && (item.key === eduInstituteId))}}> {icon.write("white")} }

) } use Infinite 호출 소스const tabMenuData = menuList.map( ({no,eduInstituteId: key, instituteNm: title})=> ( {no, title, key} )) as TabMenuData[]; const url = subMenuType === "private" ? "/gazi/api/v1/anonymous/post" : "/gazi/api/v1/anonymous/pub/post" const {data: pageData, fetchNextPage, hasNextPage} = useInfiniteQuery( [boardQueryKey.boardList, user?.sub, eduInstituteId], ({pageParam = 1, signal}) => { const props = { user, param: { eduInstituteId: eduInstituteId, page: pageParam } } return callAxiosGet>(url,props); }, { getNextPageParam: (data) => { return data.hasNext ? data.currentPageNumber + 1 : undefined; } , // enabled: subMenuType === "private" ? (!!user && (children && children.length > 0) && eduInstituteId.length > 0) : !!eduInstituteId, } ); return { user, subMenuData, tabMenuAll, tabMenuData, subMenuType, eduInstituteId, pageData, fetchNextPage, hasNextPage, }

컴포지트 · Accepted Answer

useQuery 시리즈는 queryKey(보통 첫번째 인자에 들어가는 문자열이나 배열, 객체 등의 식별 가능한 객체)의 변화에 따라 움직입니다. 따라서 원치 않은 호출이 일어나면, queryKey 의 변화를 먼저 확인해 보시길. 필요 시 해당 코드의 본문 일부를 올리면 해결에 도움이 될 수 있습니다. 또는, 현재 컴포넌트 자체를 부모 컴포넌트가 다르게 호출하도록 유도한 경우, queryKey 상관 없이 적용되니, 부모 컴포넌트가 자식을 부를 때에 대한 상태 변화도 확인해 보시길.

리액트 쿼리 useInfiniteQuery 스테이트 변경 시 전체 조회 되는 현상

1개의 답변

Q&A 목록