将 useQuery 与 TypeScript 一起使用时出现“没有重载匹配此调用”错误答案

【问题标题】：Getting "No overload matches this call" error when using useQuery with TypeScript将 useQuery 与 TypeScript 一起使用时出现“没有重载匹配此调用”错误
【发布时间】：2021-09-13 00:00:27
【问题描述】：

我的打字稿有一个类型问题。

我有以下 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));

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

错误如下：

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[]>

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

【问题讨论】：

useQuery 来自reeact-query。我这样导入它：import { useQuery } from "react-query";

标签： reactjs typescript next.js react-query

【解决方案1】：

您正在向您的 useQuery 调用传递一个承诺（clientAPIs.getOptions(...) 返回一个承诺），但它实际上需要一个函数作为 fetcher 参数。

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

Thant 来自 get 方法 man。靠近它看