No overload matches this call. React query error with useInfiniteQuery

Question

My code works well but I can not npm run build through this error. I want to create infinite scroll with react query and react-intersection-observer. Here is it:

 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.

And my code:

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

Here is I call my hook:

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

It's working but I can't deploy my app through this error. I guess it wants to init value as string and Idk why. In docs specified number too. When I use initialValu whith string but not a number this error disappears but then it doesn't work :( .

Answer 1

According to this:

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

it seems like it's expecting your getNextPageParam function to return a number but it's returning a string.

Maybe you need to change the function signature to:

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