React Native - useInfiniteQuery 파라미터 여러개 넘기기

why ?

가게 전체 상품에 대한 리뷰를 가져올때 reviews/{ storeId } 로 데이터를 요청하잖아요?? 근데 useInfiniteQuery 공식문서에는 암만 찾아봐도 fetchApi 함수에 파라미터 여러개 넘기는 방법이 없어서 찾아봄.

 

 

🔽 이게 공식문서

const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam = 1 }) => fetchPage(pageParam),
  ...options,
  getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
})

🚨 일단 storeId 값에 맞는 리뷰만 불러오는 커스텀 훅 useReviews 작성

const useReviews = (filters: GetReviewsParams) => {
  const {data, hasNextPage, fetchNextPage, isFetched} = useInfiniteQuery(
    [queryKeys.reviews, filters],
    ({pageParam = 1}) => getReviews(pageParam, filters),
    {
      getNextPageParam: lastPage => lastPage.nextPage,
      keepPreviousData: true,
      refetchOnMount: false,
    },
  );

  const loadMore = useCallback(() => {
    if (hasNextPage) {
      fetchNextPage();
    }
  }, [hasNextPage, fetchNextPage]);

  return {data, loadMore, isFetched};
};

• useReviews 파라미터로 필터링할 정보(storeId, productId)를 받아옴.
• filter를 쿼리키 배열의 두번째에 작성. 커스텀 훅 내에서 전역변수 받아다가 추가하려면 ['쿼리키', {...filters, param}] 으로 추가~
• 그리고 ({pageParam =  1}) => fetchApi( pageParam, filters ) 로 넘겨준다.
• useQuery는 쿼리키에 의존하여 데이터를 변화시키기때문에 ['쿼리키', 변수] 이렇게 입력하면 해당 쿼리키와 변수에 상태변화가 있을때마다 두번째 fetch함수를 실행한다!

🚨 대망의 getReviews!

구글링 열심히했는데 계속 데이터 get해오는 함수는 안보여주더라ㅡㅡ 답답

const getReviews = async (pageNo: number, filters: GetReviewsParams) => {
  const {
    data: {data},
  } = await httpClient.get<Page<IReview>>('/reviews', {
    params: {
      filters,
      pageNo,
      pageSize: 8,
    },
  });
  const nextPage = data.totalPage > pageNo ? pageNo + 1 : undefined;

  return {...data, nextPage};
};

이렇게 작성하면 됨. 이제 useInfiniteQuery 가 퉤! 하고 뱉어주는 data를 FlatList에 잘 꽂아보쟈🥹 야호.

 

 

참고사항

코드는 오류없는데 data가 자꾸 undefined로 뜨는것임 ㅠ

알고봤더니 params를 저렇게 넘기니 api에서도 파라미터를 추가해줘야댐!!! 당연히 기본이지 응응.. 미처 간과했다.