[Tanstack Query] 유용한 쿼리 - Dependent Query, Paginated Query, Infinite Query

1. Dependant Query

특정 값을 먼저 받아오거나 어떤 조건이 되었을 때 쿼리 함수를 실행하려면 enabled 옵션을 사용한다.

const { data: productData } = useQuery({
  queryKey: ['product', productId],
  queryFn: () => fetchProduct(productId),
  enabled: !!productId,
});

!!를 통해 boolean데이터로 바꿔준다.

2. Paginated Query

쿼리 키에 페이지 정보를 포함해서 페이지네이션을 구현할 수 있다. placeholderData 옵션을 활용하면, 새로운 페이지를 보여줄 때 이전의 데이터를 보여주다가 새로운 데이터가 오면 자연스럽게 전환할 수 있다.

const { data: productData } = useQuery({
  queryKey: ['product', productId],
  queryFn: () => getProduct(productId),
  enabled: !!productId,
});

prefetchQuery() 함수를 사용하면 다음 페이지의 데이터를 미리 fetch하도록 구현할 수도 있다.

useEffect(() => {
  if (!isPlaceholderData && userListData?.hasMore) {
    queryClient.prefetchQuery({
      queryKey: ['users', page + 1],
      queryFn: () => getUsers(page + 1, PAGE_LIMIT),
    });
  }
}, [isPlaceholderData, userListData, queryClient, page]);

3. Infinite Query

useInfiniteQuery 훅에서는 페이지 파라미터 값을 활용하여 페이지를 더 불러온다.

const {
  data: commentsData,
  isPending,
  isError,
  hasNextPage,
  fetchNextPage,
  isFetchingNextPage,
} = useInfiniteQuery({
  queryKey: ['comments'],
  queryFn: ({ pageParam }) => getComments(pageParam, LIMIT),
  initialPageParam: 0,
  getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
    lastPage.hasMore ? lastPageParam + 1 : undefined,
});

useQuery에서는 data에 한 페이지에 해당하는 데이터만 담고 있었지만, useInfiniteQuery에서는 data에 모든 페이지의 데이터가 pages라는 프로퍼티로 배열에 담겨 있다.

getNextPageParam 함수에서 다음 페이지가 있는 경우 다음 페이지 파라미터 값을 리턴하는데, fetchNextPage 함수에서는 이렇게 리턴된 페이지 파라미터 값을 쿼리 함수로 전달해 다음 페이지의 데이터를 받아온다.

만약 getNextPageParams 함수에서 undefined나 null 값을 리턴하면 다음 페이지가 없는 것으로 간주해 fetchNextPage 함수를 실행해도 더 이상 데이터를 받아오지 않고, hasNextPage의 값도 false가 된다.

파라미터 설명

•	lastPage: 마지막으로 fetch한 페이지의 데이터.
•	allPages: 지금까지 fetch한 모든 페이지의 데이터 배열.
•	lastPageParam: 마지막으로 사용된 페이지 파라미터 값.
•	allPageParams: 지금까지 사용된 모든 페이지 파라미터 값 배열.