时间戳

首页 > 解决方案 > 将 useQuery 与 TypeScript 一起使用时出现“没有重载匹配此调用”错误

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

问题描述

我有打字稿的类型问题。

我有以下 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[]>

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

标签： reactjstypescriptnext.jsreact-query

解决方案

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

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

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

推荐阅读