使用React useInfiniteQuery时出现‘no overload matches this call’错误求助

问题 #

使用React的useInfiniteQuery时出现以下TypeScript错误：

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.

相关代码：

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,
  };
}

解决方案 #

错误原因是React Query v5版本起，initialPageParam成为useInfiniteQuery的必填配置项，旧版本中该参数为可选，你查阅的文档可能对应旧版本。

只需在useInfiniteQuery的配置对象中添加initialPageParam，值与fetchMessages中默认的pageParam保持一致即可：

修改后的useInfiniteQuery调用代码：

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
  status,
} = useInfiniteQuery({
  queryKey: [queryKey],
  queryFn: fetchMessages,
  getNextPageParam: (lastPage) => lastPage?.nextCursor,
  refetchInterval: isConnected ? false : 1000,
  initialPageParam: undefined, // 添加该行配置
});

若你的分页初始参数不是undefined（比如初始页码为1），对应修改initialPageParam的值即可。

内容的提问来源于stack exchange，提问作者idevelopapps