Why am I getting "no overload matches this call" using "useInfiniteQuery" with React?

Question

I need help figuring out why my code isn't working and I keep getting this error:

No overload matches this call.
  Overload 1 of 3, '(options: UndefinedInitialDataInfiniteOptions<any, Error, InfiniteData<any, unknown>, string[], undefined>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: undefined; }) => Promise<any>; getNextPageParam: (lastPage: any) => any; refetchInterval: false | 1000; }' is not assignable to parameter of type 'UndefinedInitialDataInfiniteOptions<any, Error, InfiniteData<any, unknown>, string[], undefined>'.
      Property 'initialPageParam' is missing in type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: undefined; }) => Promise<any>; getNextPageParam: (lastPage: any) => any; refetchInterval: false | 1000; }' but required in type 'UseInfiniteQueryOptions<any, Error, InfiniteData<any, unknown>, any, string[], undefined>'.
  Overload 2 of 3, '(options: DefinedInitialDataInfiniteOptions<any, Error, InfiniteData<any, unknown>, string[], undefined>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: undefined; }) => Promise<any>; getNextPageParam: (lastPage: any) => any; refetchInterval: false | 1000; }' is not assignable to parameter of type 'DefinedInitialDataInfiniteOptions<any, Error, InfiniteData<any, unknown>, string[], undefined>'.
      Property 'initialPageParam' is missing in type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: undefined; }) => Promise<any>; getNextPageParam: (lastPage: any) => any; refetchInterval: false | 1000; }' but required in type 'UseInfiniteQueryOptions<any, Error, InfiniteData<any, unknown>, any, string[], undefined>'.
  Overload 3 of 3, '(options: UseInfiniteQueryOptions<any, Error, InfiniteData<any, unknown>, any, string[], undefined>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: undefined; }) => Promise<any>; getNextPageParam: (lastPage: any) => any; refetchInterval: false | 1000; }' is not assignable to parameter of type 'UseInfiniteQueryOptions<any, Error, InfiniteData<any, unknown>, any, string[], undefined>'.
      Property 'initialPageParam' is missing in type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: undefined; }) => Promise<any>; getNextPageParam: (lastPage: any) => any; refetchInterval: false | 1000; }' but required in type 'UseInfiniteQueryOptions<any, Error, InfiniteData<any, unknown>, any, string[], undefined>'.ts(2769)
queryClient-5b892aba.d.ts(323, 5): 'initialPageParam' is declared here.
queryClient-5b892aba.d.ts(323, 5): 'initialPageParam' is declared here.
queryClient-5b892aba.d.ts(323, 5): 'initialPageParam' is declared here.

Here is the code:

import qs from "query-string";
import { useInfiniteQuery } from "@tanstack/react-query";

import { useSocket } from "@/components/providers/SocketProvider";

interface ChatQueryProps {
  queryKey: string;
  apiUrl: string;
  paramKey: "channelId" | "conversationId";
  paramValue: string;
};

export const useChatQuery = ({
  queryKey,
  apiUrl,
  paramKey,
  paramValue
}: ChatQueryProps) => {
  const { isConnected } = useSocket();

  const fetchMessages = async ({ pageParam = undefined }) => {
    const url = qs.stringifyUrl({
      url: apiUrl,
      query: {
        cursor: pageParam,
        [paramKey]: paramValue,
      }
    }, { skipNull: true });

    const res = await fetch(url);
    return res.json();
  };

  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery({
    queryKey: [queryKey],
    queryFn: fetchMessages,
    getNextPageParam: (lastPage) => lastPage?.nextCursor,
    refetchInterval: isConnected ? false : 1000,
  });

  return {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  };
}

I tried looking into the documentation from @tanstack/react-query and I believe that I have it setup correctly.

If this is a little vague, please ask questions so I can help zone in on the answer. Thank you!

Answer 1

While your code would work in react-query v4, v5 has changed what needs to be passed in to useInfiniteQuery. There's now a mandatory parameter called initialPageParam. You can set it to undefined if you want, but you'll need to do so explicitly:

  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery({
    queryKey: [queryKey],
    queryFn: fetchMessages,
    getNextPageParam: (lastPage) => lastPage?.nextCursor,
    refetchInterval: isConnected ? false : 1000,
    initialPageParam: undefined, // Or some other value if there's a better one
  });