I am getting this error "no overload matches this call" using "useInfiniteQuery" with React?

1

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, Error, InfiniteData<FetchResponse, unknown>, QueryKey, unknown>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<…>’, gave the following error.
Type ‘undefined’ is not assignable to type ‘(InfiniteData<FetchResponse, unknown> | InitialDataFunction<InfiniteData<FetchResponse, unknown>> | undefined) & (InfiniteData<…> | (() => InfiniteData<…>))’.
Overload 2 of 3, ‘(options: UndefinedInitialDataInfiniteOptions<FetchResponse, Error, InfiniteData<FetchResponse, 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, Error, InfiniteData<FetchResponse, unknown>, QueryKey, unknown>’.

Overload 3 of 3, ‘(options: UseInfiniteQueryOptions<FetchResponse, Error, InfiniteData<FetchResponse, unknown>, FetchResponse, 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, Error, InfiniteData<FetchResponse, unknown>, FetchResponse, 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, Error, InfiniteData<FetchResponse, unknown>, FetchResponse, 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, Error, InfiniteData<FetchResponse, 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;
2

I think you need to make these changes:

  1. Remove initialData: If you don’t have any initial data to set, you can simply remove the initialData: undefined, line from your options. React Query doesn’t require initialData to be explicitly set to undefined.
  2. Add initialPageParam: If you are using pagination, you should specify the initialPageParam to ensure that the query knows the starting page. This can be set to 1 or whatever your starting page is.
import { useInfiniteQuery } 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,
        },
      }),
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.next ? allPages.length + 1 : undefined;
    },
    initialPageParam: 1, // Add this line
  });

export default useGames;