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

Quick Fix: In useInfiniteQuery of React Query 5, initialPageParam is a mandatory parameter. Specify it explicitly, even if you want to set it to undefined.

The Problem:

When using useInfiniteQuery from @tanstack/react-query, a developer encounters the "no overload matches this call" error with multiple overloads providing similar errors. The developer has implemented the useChatQuery hook with pagination and refetching capabilities, utilizing fetchMessages as the query function. However, there’s an issue with the useInfiniteQuery options, and the error points to the missing initialPageParam property.

The Solutions:

Solution 1: Specify the initialPageParam

In the updated version of react-query (v5), the useInfiniteQuery hook requires an initialPageParam parameter. This parameter specifies the initial page parameter to be used when fetching the first page of data.

To fix the error, you can explicitly set the initialPageParam to undefined in your useChatQuery hook:

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

This will resolve the "no overload matches this call" error and allow your code to work correctly.

Q&A