将 useQuery 与 TypeScript 一起使用时出现 "No overload matches this call" 错误

Question

我的打字稿有 type 问题。

我有以下 API:

export const clientAPI ={
//...
  getOptions: async (myParam: number) =>
    get<{ options: Options[]; courses: any[] }>(`/courses?myParam=${myParam}`)().then((result) => {
      localStorage.setItem('result', JSON.stringify(result))
      return result
    }),
//...
}

假设get方法如下：

const get =
  <T>(url: string) =>
    () => {
      const token = localStorage.getItem('token')
      return fetch(url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          ...(token ? { Authorization: `Bearer ${token}` } : {}),
        },
      }).then((res) => parseResponse<T>(res))
    }

然后我调用 getOptions，如下所示：

useQuery("result", clientAPIs.getOptions(value as number));

我需要的是将响应放入 本地存储 以便使用动态 select 访问它，这取决于几个事件。当我更改一个值时，我调用一个 API，returns 动态地调用选项，所以这就是我需要将它们放在本地存储中的原因。问题是我调用它的方式（上面的最后一个代码）给出了一些类型错误，即使它按照我的意愿编译并实际存储了响应。

错误如下：

No overload matches this call.
  Overload 1 of 3, '(queryKey: "result", options?: UseQueryOptions<unknown, unknown, unknown, "result"> | undefined): UseQueryResult<unknown, unknown>', gave the following error.
    Type 'Promise<Options[]>' has no properties in common with type 'UseQueryOptions<unknown, unknown, unknown, "result">'.
  Overload 2 of 3, '(queryKey: "result", queryFn: QueryFunction<unknown, "result">, options?: UseQueryOptions<unknown, unknown, unknown, "result"> | undefined): UseQueryResult<...>', gave the following error.
    Argument of type 'Promise<Options[]>' is not assignable to parameter of type 'QueryFunction<unknown, "result">'.
      Type 'Promise<Options[]>' provides no match for the signature '(context: QueryFunctionContext<"result", any>): unknown'.ts(2769)
(property) getOptions: (country: string) => Promise<Options[]>

这更像是一个警告，但我想知道如何解决它。

Answer 1

.then()前面不就是多了一对括号吗？您已经传递了类型和 url，不知道后面的括号

...
get<{ options: Options[]; courses: any[] }>(`/courses?myParam=${myParam}`)().then((result) => { ... }

Answer 2

您正在向 useQuery 调用传递承诺（clientAPIs.getOptions(...) returns 承诺）但它实际上需要一个函数作为获取器参数。

要解决此问题，您只需将第二个参数修改为函数即可。

useQuery("result", () => clientAPIs.getOptions(value as number));

将 useQuery 与 TypeScript 一起使用时出现 "No overload matches this call" 错误

Getting "No overload matches this call" error when using useQuery with TypeScript

typescript

reactjs

next.js

react-query