没有重载与此调用匹配。使用 useInfiniteQuery 反应查询错误

Question

我的代码运行良好，但我无法通过此错误 npm run build 。 我想用反应查询和反应交集观察者创建无限滚动。 这是它：

 No overload matches this call.
 No overload matches this call.
  Overload 1 of 3, '(options: UndefinedInitialDataInfiniteOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, QUERY_KEYS[], number>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Type '(lastPage: DocumentList<Document> | undefined) => string | null' is not assignable to type 'GetNextPageParamFunction<number, DocumentList<Document> | undefined>'.
      Type 'string | null' is not assignable to type 'number | null | undefined'.
        Type 'string' is not assignable to type 'number'.
  Overload 2 of 3, '(options: DefinedInitialDataInfiniteOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, QUERY_KEYS[], number>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...>', gave the following error.
    Type '(lastPage: DocumentList<Document> | undefined) => string | null' is not assignable to type 'GetNextPageParamFunction<number, DocumentList<Document> | undefined>'.
  Overload 3 of 3, '(options: UseInfiniteQueryOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, DocumentList<...> | undefined, QUERY_KEYS[], number>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Type '(lastPage: DocumentList<Document> | undefined) => string | null' is not assignable to type 'GetNextPageParamFunction<number, DocumentList<Document> | undefined>'.ts(2769)
queryClient-b7fce2ff.d.ts(335, 5): The expected type comes from property 'getNextPageParam' which is declared here on type 'UndefinedInitialDataInfiniteOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, QUERY_KEYS[], number>'
queryClient-b7fce2ff.d.ts(335, 5): The expected type comes from property 'getNextPageParam' which is declared here on type 'DefinedInitialDataInfiniteOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, QUERY_KEYS[], number>'
queryClient-b7fce2ff.d.ts(335, 5): The expected type comes from property 'getNextPageParam' which is declared here on type 'UseInfiniteQueryOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, DocumentList<...> | undefined, QUERY_KEYS[], number>'
(property) getNextPageParam: GetNextPageParamFunction<number, Models.DocumentList<Models.Document> | undefined>
This function can be set to automatically get the next cursor for infinite queries. The result will also be used to determine the value of hasNextPage.

我的代码：

export const useGetPosts = () => {
  return useInfiniteQuery({
    queryKey: [QUERY_KEYS.GET_INFINITE_POSTS],
    queryFn: getInfinitePosts,
    getNextPageParam: (lastPage) => {
      if (lastPage && lastPage.documents.length === 0) {
        return null;
      }

      const lastId = lastPage.documents[lastPage.documents.length - 1].$id;
      return lastId;
    },
  });
};

export async function getInfinitePosts({ pageParam }: { pageParam: number }) {
  const queries = [Query.orderDesc('$updatedAt'), Query.limit(12)];

  if (pageParam !== undefined) {
    queries.push(Query.cursorAfter(pageParam.toString()));
  }

  try {
    const posts = await databases.listDocuments(
      appwriteConfig.databaseId,
      appwriteConfig.postsCollectionId,
      queries
    );

    if (!posts) throw Error;

    return posts;
  } catch (error) {
    console.log(error);
  }
}

这是我调用我的钩子：

const { ref, inView } = useInView();
  const { data: posts, fetchNextPage, hasNextPage } = useGetPosts();

  const [searchValue, setSearchValue] = useState('');
  const debouncedSearch = useDebounce(searchValue, 500);
  const { data: searchedPosts, isFetching: isSearchFetching } = useSearchPosts(debouncedSearch);
  useEffect(() => {
    if (inView && !searchValue) {
      fetchNextPage();
    }
  }, [inView, searchValue]);

它正在工作，但我无法通过此错误部署我的应用程序。我猜它想将初始化值作为字符串，我不知道为什么。在文档中也指定了数字。当我使用 initialValu 字符串而不是数字时，此错误消失，但随后它不起作用:( .

Answer 1

据此：

GetNextPageParamFunction<number, Models.DocumentList<Models.Document> | undefined>

它似乎期望您的

getNextPageParam

函数返回一个数字，但它返回一个字符串。

也许您需要将函数签名更改为：

getInfinitePosts({ pageParam }: { pageParam: string })