useInfiniteQuery의 initialPageParam 관련 문제 해결 경험

 

---

 

포스팅 목적

Next14 + useInfiniteQuery 으로 SSR 무한스크롤 실습 중 경험한
initialPageParam 인자값 명시 문제의 원인을 찾고 해결한 과정을 포스팅합니다.

 

해결 과정

 

1. 문제 배경과 경험한 문제에 대한 설명

Next14 + useInfiniteQuery를 사용하여 초기 10개의 데이터는 SSR,

이후에 받는 데이터는 CSR로 처리하는 실습을 진행 중에 겪은 문제입니다.

 

문제를 일으킨 코드는 다음과 같습니다.

export const getServerSideProps = async () => {
  const response = await axios.get<TData[]>(`${API_URL}`);
  return {
    props: {
      initialData: response.data,
    },
  };
};  

export default function Home({ initialData }: { initialData: TData[] }) {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isError,
    error,
    isLoading,
  } = useInfiniteQuery({
    queryKey: ["getDogImg"],
    queryFn: fetchData,
    initialData: { pages: [initialData], pageParams: [0] },
    getNextPageParam: (_lastPage, allPages) => allPages.length,
    staleTime: 1000 * 5 * 60, // 5분
  });

 

 

발생한 에러 메시지는 다음과 같습니다.

No overload matches this call.
  Overload 1 of 3, '(options: DefinedInitialDataInfiniteOptions<TData[], Error, InfiniteData<TData[], unknown>, string[], number>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: number | undefined; }) => Promise<TData[]>; initialData: { pages: TData[][]; pageParams: number[]; }; getNextPageParam: (_lastPage: TData[], allPages: TData[][]) => number; staleTime: number; }' is not assignable to parameter of type 'DefinedInitialDataInfiniteOptions<TData[], Error, InfiniteData<TData[], unknown>, string[], number>'.
      Property 'initialPageParam' is missing in type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: number | undefined; }) => Promise<TData[]>; initialData: { pages: TData[][]; pageParams: number[]; }; getNextPageParam: (_lastPage: TData[], allPages: TData[][]) => number; staleTime: number; }' but required in type 'UseInfiniteQueryOptions<TData[], Error, InfiniteData<TData[], unknown>, TData[], string[], number>'.
  Overload 2 of 3, '(options: UndefinedInitialDataInfiniteOptions<TData[], Error, InfiniteData<TData[], unknown>, string[], number>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: number | undefined; }) => Promise<TData[]>; initialData: { pages: TData[][]; pageParams: number[]; }; getNextPageParam: (_lastPage: TData[], allPages: TData[][]) => number; staleTime: number; }' is not assignable to parameter of type 'UndefinedInitialDataInfiniteOptions<TData[], Error, InfiniteData<TData[], unknown>, string[], number>'.
      Property 'initialPageParam' is missing in type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: number | undefined; }) => Promise<TData[]>; initialData: { pages: TData[][]; pageParams: number[]; }; getNextPageParam: (_lastPage: TData[], allPages: TData[][]) => number; staleTime: number; }' but required in type 'UseInfiniteQueryOptions<TData[], Error, InfiniteData<TData[], unknown>, TData[], string[], number>'.
  Overload 3 of 3, '(options: UseInfiniteQueryOptions<TData[], Error, InfiniteData<TData[], unknown>, TData[], string[], number>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: number | undefined; }) => Promise<TData[]>; initialData: { pages: TData[][]; pageParams: number[]; }; getNextPageParam: (_lastPage: TData[], allPages: TData[][]) => number; staleTime: number; }' is not assignable to parameter of type 'UseInfiniteQueryOptions<TData[], Error, InfiniteData<TData[], unknown>, TData[], string[], number>'.
      Property 'initialPageParam' is missing in type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: number | undefined; }) => Promise<TData[]>; initialData: { pages: TData[][]; pageParams: number[]; }; getNextPageParam: (_lastPage: TData[], allPages: TData[][]) => number; staleTime: number; }' but required in type 'UseInfiniteQueryOptions<TData[], Error, InfiniteData<TData[], unknown>, TData[], string[], number>'.ts(2769)
hydration-B_mC2U5v.d.ts(623, 5): 'initialPageParam' is declared here.
hydration-B_mC2U5v.d.ts(623, 5): 'initialPageParam' is declared here.
hydration-B_mC2U5v.d.ts(623, 5): 'initialPageParam' is declared here.

 

2. 문제 해결 과정

문제를 해결하는 과정에서 알게된 정보는 다음과 같습니다.

• 이 문제는 경우에는 initialPageParam을 명시해줘야만 한다는 오류메시지로 
  이전에도 비슷한 환경에서 실습했을때는 문제없었던 부분이었습니다.
• 이러한 문제가 발생한 원인은 TanStack Query의 버전차이였습니다.
  이전에는 v4로 실습했었고 v4에서는 위 코드가 정상적으로 동작하는 코드였지만
  v5로 업데이트되면서 실제로 initialPageParam 인자값이 사용되지 않더라도
  명시적으로 작성해줘야한다는 점을 알았습니다.
• 제 경우에는 데이터를 처음부터 불러오는 실습을 하고 있었기 때문에 기본값인 0으로 작성했고
  이를 통해 문제를 해결했습니다.

 

3. 느낀점

비슷한 문제를 경험한 사례를 찾는데 집중했던 것 같습니다.
숙련도가 낮은 기술을 다룰때는 공식문서를 통해 해결하는 방법이 제일 깔끔한 것 같습니다.