TanStackT
TanStack•3y ago•
1 reply
brilliant-lime

About using useInfiniteQuery

Hello, I'm strugling creating a useInfiniteQuery hook

errors is at line 17 with queryFn
No overload matches this call.
  Overload 1 of 3, '(options: UndefinedInitialDataInfiniteOptions<Post[], Error, InfiniteData<Post[], unknown>, QueryKey, unknown>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Type '({ pageParam }: { pageParam?: number | undefined; }) => any' is not assignable to type 'QueryFunction<Post[], QueryKey, unknown>'.
      Types of parameters '__0' and 'context' are incompatible.
        Type '{ queryKey: QueryKey; signal: AbortSignal; pageParam: unknown; direction: FetchDirection; meta: Record<string, unknown> | undefined; }' is not assignable to type '{ pageParam?: number | undefined; }'.
          Types of property 'pageParam' are incompatible.
            Type 'unknown' is not assignable to type 'number | undefined'.
  Overload 2 of 3, '(options: DefinedInitialDataInfiniteOptions<Post[], Error, InfiniteData<Post[], unknown>, QueryKey, unknown>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...>', gave the following error.
    Type '({ pageParam }: { pageParam?: number | undefined; }) => any' is not assignable to type 'QueryFunction<Post[], QueryKey, unknown>'.
  Overload 3 of 3, '(options: UseInfiniteQueryOptions<Post[], Error, InfiniteData<Post[], unknown>, Post[], QueryKey, unknown>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Type '({ pageParam }: { pageParam?: number | undefined; }) => any' is not assignable to type 'QueryFunction<Post[], QueryKey, unknown>'.ts(2769)
queryClient-5b892aba.d.ts(297, 5): The expected type comes from property 'queryFn' which is declared here on type 'UndefinedInitialDataInfiniteOptions<Post[], Error, InfiniteData<Post[], unknown>, QueryKey, unknown>'
queryClient-5b892aba.d.ts(297, 5): The expected type comes from property 'queryFn' which is declared here on type 'DefinedInitialDataInfiniteOptions<Post[], Error, InfiniteData<Post[], unknown>, QueryKey, unknown>'
queryClient-5b892aba.d.ts(297, 5): The expected type comes from property 'queryFn'


and another at line 26
Expression expected.ts(1109)


import { useInfiniteQuery } from "@tanstack/react-query";
import axios from "axios";

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

interface PostQuery {
  pageSize: number;
}
export default function usePostList(query: PostQuery) {
  return useInfiniteQuery<Post[], Error>({
    queryKey: ["post", query],
    queryFn: ({ pageParam = 1 }: {pageParam?: number}) => {
      return axios
        .get("https://jsonplaceholder.typicode.com/posts", {
          params: {
            _start: (pageParam - 1) * query.pageSize,
            _limit: query.pageSize,
          },
        })
        .then((res) => res.data),
    },
    staleTime: 1 * 60 * 1000,
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.length > 0 ? allPages.length + 1 : undefined;
    },
  });
}

import usePostList from "../hooks/usePostList";

const PostList = () => {
  const pageSize = 10;
  const { data, error, isLoading, fetchNextPage } = usePostList({ pageSize });

  if (isLoading) return <p>Loading...</p>;

  if (error) return <p>{error.message}</p>;

  return (
    <>
      <ul className="list-group">
        {data?.map((post) => (
          <li key={post.id} className="list-group-item">
            {post.title}
          </li>
        ))}
      </ul>
      <button onClick={() => fetchNextPage()}>Load More</button>
    </>
  );
};

export default PostList;


thank you!
Was this page helpful?