#useinfinitequery

리액트쿼리 고수분들 도와주세요

사이드프로젝트 리팩토링을 진행하는 중에 이해가 안되는 부분이 있어 글 써봅니다. const { data, isLoading, fetchNextPage } = useInfiniteQuery( ["getProducts", sortOption, sortOrder, filterValue, categoryName], async ({ pageParam = page - 1 }) => { const response = await api.post(`/cal/v1/product/${categoryName}`, { filter: filterValue, page: pageParam, query: "", size: size, => size: size - 8 /* 변경한 부분 */ sort: [{ field: sortOption, option: sortOrder }], }); setTotalProduct(response.data.body.product.totalCount); return response.data.body.product.items; }, { refetchOnWindowFocus: false, getNextPageParam: () => page, } ); 위 코드는 인피니티 스크롤을 구현한건데요, size는 한번에 받아 올 상품의 개수 입니다. 상품을 한번에 4개 받아올때는 500ms~, 8개 = 2500ms~, 12개 = 10000ms~ 정도로 요청시간이 비정상적으로 커집니다. 사용자경험과 api요청횟수를 고려했을 때, 12개를 받아오는것이 가장 적당하다고 생각되는데 렌더링 속도가 많이 느리다고 생각되서 개선하고자 합니다. **초기렌더링 에서만 문제가 발생되고, 캐싱되어 fresh한 상태일 때는 바로 불러옵니다** 코드의 다른요소들은, 필터링. 정렬들을 위한 요소들이라 렌더링 시간에 영향을 줄 것 같지는 않은데 왜 이런 문제가 발생하는지 궁금합니다. 이 외에도 잘못작성된 부분이 있거나, 개선해야할 사항이 보이신다면 알려주시면 감사하겠습니다!!

React 무한 스크롤 구현 방식(useState,useInfiniteQuery) 차이점?

프로젝트를 진행하면서 useInfiniteQuery를 사용해 무한스크롤 기능을 구현했습니다. 방식은 대충 아래와 같이 흘러갑니다. 1. intersection-observer를 사용해 특정 영역이 보이면 useInfinteQuery를 사용해 pageParam를 +1 하고 axios 함수를 호출합니다. 2. 카테고리 별로 상품을 나눴으며 카테고리 재 클릭 시(A->B->A) 캐시가 삭제되어 다시 처음부터 무한 스크롤이 작동 됩니다. 다 만들고 생각해보니깐 뭔가 observer가 활성화되면 axios 함수를 호출 할 때마다 useState를 사용해서 setState(page +1) 이런식으로 적용해서 /shop/getAll/${category}?page=${page} 여기에 넣어주면 구현은 될 거 같습니다. 하지만 이게 성능에 큰 차이점이 있는지도 잘 모르겠고 server 상태를 관리하기 위해 이렇게 사용하는 건가 싶기도 하고.. 두 가지 구현 방식에 대해 차이점을 잘 모르겠습니다. 다른 분들은 왜 사용하고 있는지 궁금합니다. (정확히는 useState를 사용해서 무한 스크롤을 구현하는 방식이랑 useInfiniteQuery를 사용해 구현하는 방식의 차이를 모르겠습니다.)

RN FlatList의 loader가 늦게 표시되는데 개선할 방법이 있을까요?

React Native의 FlatList를 이용해서 무한스크롤 목록을 만들었습니다. 데이터는 react-query의 useInfiniteQuery를 이용해서 가져오고 있고요. FlatList의 ListFooterComponent와 react-query의 isFetchingNextPage 값을 이용해서 다음 목록을 가져올 때 목록 하단에 loader를 표시해주고 있는데 loader가 늦게 나타납니다. (코드 사진 첨부합니다.) loader가 나타나는 속도를 개선할 수 있는 방법이 있을까요?

react-query 에서 useInfiniteQuery 를 첫번째 cursor 부터 다시 호출하는 방법이 궁금합니다

리액트 쿼리에서 useInfiniteQuery를 사용하고 있습니다. cursor 리셋하고 처음부터 다시 호출하려면 어떻게 해야 하는지 도움 요청드립니다.

useInfiniteQuery 사용해 무한스크롤 구현 중 궁금한 점이 있습니다.

응답값에 page로 구분할 수 있는 데이터들로 구현할땐 어렵지 않았는데, 이렇게 배열 묶음으로 응답받는 경우에는 어떻게 무한스크롤 구현을 할 수 있을까요?.. 도저히 머리를 굴려보아도 해답을 못찾겠습니다.... api 응답값을 수정하는게 불가능한 상황인데 그럼 이 엔드포인트로는 구현하기가 어려울까요?..