使用 React 使用“ 使用无限查询” 来获取此错误“ 没有超载匹配此调用”
原标题：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, Error, InfiniteData, unknown>, QueryKey, unknown>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...> , gave the following error.
Type undefined is not assignable to type (InfiniteData, unknown> | InitialDataFunction, unknown>> | undefined) & (InfiniteData<...> | (() => InfiniteData<...>)) .
Overload 2 of 3, (options: UndefinedInitialDataInfiniteOptions, Error, InfiniteData, 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, Error, InfiniteData, unknown>, QueryKey, unknown> .
Overload 3 of 3, (options: UseInfiniteQueryOptions, Error, InfiniteData, 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, Error, InfiniteData, 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, Error, InfiniteData, 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, Error, InfiniteData, 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("/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,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
问题回答
Try to add initialPageParam: 1, And the initialData could be removed, I suppose.
相关问题
Why am I receiving a Cannot read properties of null (reading studentId ) error in my code when trying to update data in a React CRUD app?
This is my first question, and english is not my first language, sorry if my question is hard to understand I was trying to make simple CRUD app with mysql database and react as the frontend, and i ...
How to use one react app into another react app?
I have two react apps, parent app and child app. and child app have an hash router. I have build the child app using npm run build, It creates build folder. That build folder moved into inside the ...
我如何利用Params(Params)在React的初期阶段进行过滤,而不是提出另一个要求?
这是我的第一个问题,请与我一起回答。 I m从事一项SPA React项目,该项目跟踪农场及其相关床位,并可使用一些帮助。 我愿就......提供一些数据。
how to get selected value in Ant Design
I want to print the selected value, and below is my option list: const vesselName = [ { value: 0 , label: ALBIDDA , }, { value: 1 , label: ALRUMEILA , }, { value: 2 ,...
why custom filter reset button is not working for antd filterdropdown in table?
I have this custom filter for date , filter button is working as expected but reset button is not working, can anyone help me,what s wrong here? Below is my code which contain handlesearch,handlereset ...
How to add a <br> tag in reactjs between two strings?
I am using react. I want to add a line break <br> between strings No results and Please try another search term. . I have tried No results.<br>Please try another search term. but ...
React DnD - "Cannot have two HTML5 backends at the same time."
I am trying to make a POC with Rails5, action Cable, React and Rails and React DnD. The purpose is to make an app like trello but for an recruitment process. My front is in ReactJS. I have 3 ...
热门标签
- winforms
- combobox
- fogbugz
- java
- date
- internationalization
- asp.net
- iis
- url-rewriting
- urlrewriter
- c#
- enums
- ocaml
- haxe
- algorithm
- string
- viewstate
- .net
- c++
- c
- symbol-table
- mysql
- database
- postgresql
- licensing
- migration
- vb.net
- vb6
- declaration
- vb6-migration
- python
- psycopg2
- backup
- vmware
- virtualization
- gnu-screen
- authentication
- desktop
- excel
- xll
- cultureinfo
- regioninfo
- oracle
- client
- session
- download
- html
- virtual
- constructor
- scenarios
- perl
- full-text-search
- javascript
- ajax
- testing
- oop
- inheritance
- vim
- encapsulation
- information-hiding