react-query 요청 쌓임? 질문입니다

Question

react-query로 무한스크롤 만들고 있는중입니다.근데 스크롤 하다보면 계속 many request 에러가 뜨길래 왜인지 봤더니스크린샷 처럼 새로운 검색을 하면 요청이 중첩?되어서 날라갑니다..첫번째 단어를 검색하면 정상인데두번째 검색부터는 스크롤 내리면 2번 요청..세번째 단어는 3번요청.. 이런식입니다문제가 뭐인지 잘 모르겠습니다// react-query 코드 const getSearchData = async (query: string, page: number): Promise => { const { data } = await Axios({ method: "get", params: { q: query, page, sort: "newest", }, }); return data; }; const useSearchNews = () => { const [keyword, setKeyword] = useState(""); const { data, isLoading, hasNextPage, fetchNextPage, isFetching } = useInfiniteQuery( [keyword], ({ pageParam = 1 }) => getSearchData(keyword, pageParam), { getNextPageParam: (response, currentPages) => { const totalResults = response.response.meta.hits; const pageLength = Math.ceil(totalResults / 10); if (currentPages.length < pageLength) { return currentPages.length + 1; } else { return undefined; } }, enabled: !!keyword, } ); return { data, hasNextPage, setKeyword, keyword, fetchNextPage, isLoading, isFetching, }; };// 스크롤 페이지 부분입니다. const Home = () => { const { data, setKeyword, keyword, fetchNextPage, isFetching, isLoading } = useSearchNews(); const bottomRef = useRef(null); useEffect(() => { if (isLoading) return; const bottomWindow = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting && !!keyword) { fetchNextPage(); } }, { threshold: 0.7 } ); if (bottomRef.current) bottomWindow.observe(bottomRef.current); }, [keyword, fetchNextPage, isLoading]); const searchResults = useMemo(() => { const results = data?.pages.flatMap((page) => page.response.docs); return results || null; }, [data]); return ( {searchResults && searchResults.map((news) => ( ))} {isFetching ? : null} ); };

페코옹 · Answer

음 querykey 부분이 독특하네요.["search_news", search]이런식으로 해보시겠어요?

react-query 요청 쌓임? 질문입니다

1개의 답변

Q&A 목록