reactjs - 为什么我在 React 中使用 "no overload matches this call"会得到 "useInfiniteQuery"？

Question

我需要帮助找出为什么我的代码无法工作并且我不断收到此错误:

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

我尝试查看 @tanstack/react-query 的文档，我相信我的设置正确。

如果这有点含糊，请提出问题，以便我可以帮助您找到答案。谢谢!

Answer 1

虽然您的代码可以在react-query v4中运行，但v5已经更改了需要传递给useInfiniteQuery的内容。现在有一个名为 initialPageParam 的强制参数。如果需要，您可以将其设置为未定义，但您需要明确地这样做:

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