reactjsreact-querytanstackreact-query

Getting this error "no overload matches this call" using "useInfiniteQuery" with React


I need help figuring out why my code isn't working and I keep getting this error:

No overload matches this call.
  Overload 1 of 3, '(options: DefinedInitialDataInfiniteOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, QueryKey, unknown>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...>', gave the following error.
    Type 'undefined' is not assignable to type '(InfiniteData<FetchResponse<Game>, unknown> | InitialDataFunction<InfiniteData<FetchResponse<Game>, unknown>> | undefined) & (InfiniteData<...> | (() => InfiniteData<...>))'.
  Overload 2 of 3, '(options: UndefinedInitialDataInfiniteOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, QueryKey, unknown>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: (string | GameQuery)[]; queryFn: ({ pageParam }: { queryKey: QueryKey; signal: AbortSignal; pageParam: unknown; direction: FetchDirection; meta: Record<...> | undefined; }) => Promise<...>; initialData: undefined; getNextPageParam: (lastPage: FetchResponse<...>, allPages: FetchResponse<...>[]) => number ...' is not assignable to parameter of type 'UndefinedInitialDataInfiniteOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, QueryKey, unknown>'.
     
  Overload 3 of 3, '(options: UseInfiniteQueryOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, FetchResponse<Game>, QueryKey, unknown>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: (string | GameQuery)[]; queryFn: ({ pageParam }: { queryKey: QueryKey; signal: AbortSignal; pageParam: unknown; direction: FetchDirection; meta: Record<...> | undefined; }) => Promise<...>; initialData: undefined; getNextPageParam: (lastPage: FetchResponse<...>, allPages: FetchResponse<...>[]) => number ...' is not assignable to parameter of type 'UseInfiniteQueryOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, FetchResponse<Game>, QueryKey, unknown>'.
      Property 'initialPageParam' is missing in type '{ queryKey: (string | GameQuery)[]; queryFn: ({ pageParam }: { queryKey: QueryKey; signal: AbortSignal; pageParam: unknown; direction: FetchDirection; meta: Record<...> | undefined; }) => Promise<...>; initialData: undefined; getNextPageParam: (lastPage: FetchResponse<...>, allPages: FetchResponse<...>[]) => number ...' but required in type 'UseInfiniteQueryOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, FetchResponse<Game>, QueryKey, unknown>'.ts(2769)
hydration-Bnn1iiSg.d.ts(581, 5): The expected type comes from property 'initialData' which is declared here on type 'DefinedInitialDataInfiniteOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, QueryKey, unknown>'
hydration-Bnn1iiSg.d.ts(602, 5): 'initialPageParam' is declared here.
hydration-Bnn1iiSg.d.ts(602, 5): 'initialPageParam' is declared here.

Here is the code:

import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { GameQuery } from "../App";
import ApiClient, { FetchResponse }  from "../services/api-client";
import { Platform } from "./usePlatforms";


const apiClient= new ApiClient<Game>("/games")

export interface Game {
  id: number;
  name: string;
  background_image: string;
  parent_platforms: { platform: Platform }[];
  metacritic: number;
  rating_top: number;
}

const useGames = (gameQuery: GameQuery) =>
  useInfiniteQuery<FetchResponse<Game>,Error>({
    queryKey:["games" ,gameQuery],
    queryFn:({pageParam=1})=>
      apiClient.getAll({
      params: {
        genres: gameQuery.genre?.id,
        parent_platforms: gameQuery.platform?.id,
        ordering: gameQuery.sortOrder,
        search: gameQuery.searchText,
        page:pageParam
      },
    },),
    initialData:undefined,
    getNextPageParam:(lastPage,allPages)=>{
      return lastPage.next? allPages.length+1 : undefined
    }
  })
  
export default useGames;

I use this component in other components and define some part that is used here in other files. so if there is something that you dont get from my question please ask


Solution

  • Try to add initialPageParam: 1, And the initialData could be removed, I suppose.