useInfinityQuery

useInfinityQuery

useInfinityQuery 훅은 다음 쿼리가 무엇인지 추적하며, 다음 쿼리 함수를 실행할 수 있는 메서드(getNextPage)를 반환합니다.

useQuery 훅의 경우에는 서버 데이터만이 존재했지만 useInfinityQuery 훅은 서버 데이터뿐만 아니라 다음 쿼리 함수를 실행할 수 있는 메서드(getNextPage)도 반환합니다.

import { useInfinityQuery } from '@tanstack/react-query'

const { data,
        fetchNextPage,
        fetchPreviousPage,
        hasNextPage,
        isFetchingNextPage,
        isFetchingPreviousPage 
      } = useInfinityQuery(
          ['key', dep,,,], 
          ({ pageParams = defaultParam }) => { /* fetching data,,, */ },
          {
            // prevData: 이전 비동기 처리 결과
            // allData: 모든 비동기 처리 결과
            getNextPageParams(prevData: any, allData: any[]) {
            // 두 번째 인수로 전달된 콜백 함수 인수로 전달될 객체의 pageParams 프로퍼티 값
            return pageParams
          }
        );

parameters

1. ['key', ...deps] : 첫 번째 인수로는 useQuery 훅과 동일하게 배열을 전달하며, 배열의 첫 번째 요소는 쿼리에 대한 키 값을 작성하고 두 번째 요소 이후로는 두 번째 인수로 전달되는 콜백함수 내부에서 의존하고 있는 외부 식별자들을 작성합니다.

2. queryFn : 데이터를 fetching하는 쿼리 함수를 전달해야하며, Promise 객체를 반환하는 함수를 전달합니다.

   • useQuery 훅과는 달리 인수로 객체를 전달받으며 객체의 프로퍼티로는 pageParams 프로퍼티를 갖는 객체를 전달받습니다.
     pageParams 프로퍼티의 값은 세 번째 인수로 전달되는 옵션 객체의 getNextPageParams 메서드의 반환값이 전달됩니다.

3. Options: Object : 세 번째 인수로를 쿼리를 구성하기 위한 객체가 전달됩니다.

   • getNextPageParams: Function: 두 개의 인수를 전달받습니다. 첫 번째 인수로는 이전 비동기 처리 결과를 전달받고, 두 번째 인수로는 data.pages 배열을 전달받습니다.
     getNextPageParams 메서드의 반환값은 다음 쿼리 함수에게 전달될 객체의 pageParams의 프로퍼티 값이 됩니다.

Returns

useInfinityQuery 훅은 객체를 반환하여 반환되는 객체의 프로퍼티는 아래와 같습니다.

1. data.pages: [ data ,,, ] : 배열이 할당되어 있으며 배열의 요소로 useInfinityScroll 훅 두 번째 인수로 전달한 쿼리 함수가 반환한 Promise의 비동기 처리 결과가 바인딩되어 있습니다.
   즉, 쿼리에 대한 서버 데이터를 요소로 갖는 배열이 pages 프로퍼티에 바인딩되어 있습니다.

2. data.pageParams : 이전에 실행된 쿼리 함수의 인수로 전달된 값이 바인딩되어 있습니다.

3. fetchNextPage: Funtion : 해당 메서드를 호출하면 getNextPageParams가 실행되고 반환값이 useInfinityScroll 훅 두 번째 인수로 쿼리 함수에게 전달되어 실행됩니다. 즉, 다음 쿼리를 호출하는 함수입니다.

4. fetchPreviousPage: Function : 해당 메서드를 호출하면 이전 쿼리 함수가 실행됩니다.

5. hasNextPage: boolean : getNextPageParam 함수의 반환값을 기반으로 한 불리언 값을 갖고 있습니다.

6. isFetchingNextPage: boolean : fetchNextPage 메서드를 호출하여 다음 쿼리 함수를 처리하는 동안 true 값을 갖습니다.

7. isFetchingPreviousPage: boolean : fetchPreviousPage 메서드를 호출하여 이전 쿼리 함수를 처리하는 동안 true 값을 갖솝니다.

동작 과정

useInfinityQuery 훅은 아래와 같이 실행됩니다,

1. 컴포넌트 마운트된 후 useInfinityQuery 훅 두 번째 인수로 쿼리 함수가 실행됩니다. 이때 인수로 전달되는 객체의 pageParams 프로퍼티값은 undefined이므로 파라미터 기본값을 사용하여 pageParms 프로퍼티의 초기값을 작성해주어야 합니다.

2. 이후 쿼리 함수의 비동기 처리 결과를 data.pages[0]에 바인딩합니다. data.pageParams에는 실행된 쿼리 함수의 인수로 전달된 객체의 pageParams 프로퍼티 값이 바인딩됩니다. 즉, 반환되는 data 객체는 아래와 같은 구조를 갖습니다.

data {
    pages: [ 비동기 처리 결과 1 ],
    pageParms: 파라미터 기본값
}

3. 만약 추가적인 데이터 fethcing을 위해 다음 쿼리를 실행하는 fetchNextPage 메서드를 호출하면 getNextPageParams 메서드가 실행됩니다. 만약 반환값이 falsy 값인 경우 쿼리 함수를 실행하지 않고 truthy 값인 경우 반환값을 pageParams 프로퍼티로 갖는 객체를 생성하여 쿼리 함수의 인수로 전달하여 실행됩니다.

4. 이후 쿼리 함수의 비동기 처리 결과를 data.pages[1]에 바인딩하고, data.pageParams 프로퍼티에는 쿼리 함수의 인수로 전달된 객체의 pageParams 프로퍼티 값이 바인딩됩니다. 즉, 반환되는 data 객체는 아래와 같은 구조를 갖습니다.

data {
    pages: [ 비동기 처리 결과 1, 비동기 처리 결과 2 ],
    pageParms: 쿼리 함수 인수로 전달된 객체의 pageParams 프로퍼티 값
}