将 useQuery 与 TypeScript 结合使用时出现“没有重载与此调用匹配”错误

Question

我的打字稿有类型问题。

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

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

Answer 1

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

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

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