[React-Query] useInfiniteQuery v5

UseInfiniteQuery

initialPageParam 설정 변경

useInfiniteQuery를 사용하면 queryFn에 인자인 pageParam에 초기값을 설정해줘서 initialPageParam을 설정해줬는데 이제는 좀더 직관적으로 option의 속성값으로 initialPageParam이 추가되었다.

const res = useInfiniteQuery<string[]>({
        queryKey: ['strings'],
        // pageParam cannot set initial data in queryFn parameter
        queryFn: async ({ pageParam }) =>
            (
                await axios.get('http://localhost:8080/poke', {
                    params: {
                        page: pageParam,
                        limit: 2,
                    },
                })
            ).data,
        getNextPageParam: (_lastPage, allPages) => allPages.length + 1,

        initialPageParam: 1,
    });

getNextPageParam 필수

5버전 이전에는 getnextPageParam이 설정되지 않아도 fetching이 발생했는데 5버전 이후부터는 설정을 안하면 에러를 발생한다.

const res = useInfiniteQuery<string[]>({
        queryKey: ['strings'],
        // pageParam cannot set initial data in queryFn parameter
        queryFn: async ({ pageParam }) =>
            (
                await axios.get('http://localhost:8080/poke', {
                    params: {
                        page: pageParam,
                        limit: 2,
                    },
                })
            ).data,
        getNextPageParam: (_lastPage, allPages) => allPages.length + 1,

        initialPageParam: 1,
    });

MaxPages

maxPages 옵션으로 무한 스크롤이 요청하는 최대 페이지에 제한을 설정할 수 있다. 페이지를 요청할수록 쿼리 데이터가 축적되면 메모리를 더 많이 사용하고 해당 쿼리에 대한 데이터를 추후에 요청할 때도 더 많은 시간이 소요되는데 maxPages 설정된 개수만큼 캐싱된다.

Prefetch

Infinite query의 경우에도 쿼리를 prefetch 할 수 있다. 기본으로 한 개 페이지에 대한 쿼리를 prefetch 하지만 pages 옵션과 getNextPageParam옵션으로 한 개 이상의 페이지를 prefetch 할 수 있다.

const queryClient = useQueryClient();
    queryClient.prefetchInfiniteQuery<string[]>({
        queryKey: ['strings'],
        queryFn: async ({ pageParam }) => {
            return (
                await axios.get('http://localhost:8080/strings/pages', {
                    params: {
                        page: pageParam,
                        limit: 2,
                    },
                })
            ).data;
        },
        initialPageParam: 1,
        getNextPageParam: (_lastPage, allPages) => allPages.length + 1,

        // 3 pages can prefetched
        pages: 3,
    });

출처

https://jforj.tistory.com/378
https://www.moonkorea.dev/React-TanStack-Query-v5-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-(%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%BF%BC%EB%A6%AC)
https://tanstack.com/query/v5/docs/framework/react/reference/useInfiniteQuery