React 查询 - useQuery() 没有重载匹配此调用

Question

我收到这两个错误，我无法解释也无法解决，谁能帮我调试这个问题。

类型中缺少 startDateIndex，而我已在 UseWeatherOptions
useQuery() 没有重载匹配此调用。我应该删除配置

export const getWeatherForecast = ({
  startDateIndex,
}: {
  startDateIndex: number;
}): Promise<IWeatherForecast[]> => {
  return axios.get(`api/WeatherForecasts?startDateIndex=${startDateIndex}`);
};

type UseWeatherOptions = {
  startDateIndex: number;
  config?: QueryConfig<typeof getWeatherForecast>;
};

// Property 'startDateIndex' is missing in type '{}' but required in type 'UseWeatherOptions'.ts(2741)
export const useWeather = ({ startDateIndex, config }: UseWeatherOptions = {}) => {
  // No overload matches this call.
  return useQuery({
    ...config,
    queryKey: ['weather', startDateIndex],
    queryFn: () => getWeatherForecast({ startDateIndex }),
  });
};

Answer 1

广告 1：类型中缺少 startDateIndex，而我已在 UseWeatherOptions 中声明了类型

您的 type UseWeatherOptions 将 startDateIndex 定义为 number，因此它是必填字段。这意味着你不能将 UseWeatherOptions 初始化为空对象，因为空对象不包含 startDateIndex.

要解决此问题，您可以将 startDateIndex 定义为可选：

startDateIndex?: number

或提供默认值：

export const useWeather = ({ startDateIndex, config }: UseWeatherOptions = { startDateIndex: 0 }) => {

在这种情况下，当您调用不带参数的 useWeather() 时，startDateIndex 将是 0（如果这是您想要的）。

广告 2：useQuery() 没有重载匹配此调用。我应该删除配置

您使用的类型有误。传递给 useQuery 的 options 不是 QueryConfig 类型，而是 UseQueryOptions.

类型

但是，该接口有 4 个泛型，所以如果你想在 useQuery 上提供一个允许传入所有 options 的抽象，你也需要使你的函数泛型.

我通常不会做这样的抽象，因为这意味着对 useWeather 的每次调用都可能传递所有可能的查询选项，如果它们在多次调用中不同（比如cacheTime)。此外，您需要做的最少的事情是 Omit queryFn 和 queryKey，因为您已经对其进行了硬编码。所以沿着这些方向：

function useWeather<
  TQueryFnData,
  TError,
  TData = TQueryFnData,
  TQueryKey = QueryKey,
>(
  startDateIndex: number,
  options?: Omit<
    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
    "queryKey" | "queryFn"
  >
) {
  return useQuery({
    ...options
    queryKey: ['weather', startDateIndex],
    queryFn: () => getWeatherForecast({ startDateIndex }),
  });
}

在大多数情况下，提供只允许传递您真正希望自定义挂钩的消费者传递的选项的抽象要好得多。比如，查询运行有时间隔？让他们传入refetchInterval: number，等等...

React 查询 - useQuery() 没有重载匹配此调用

React query - useQuery() No overload matches this call

typescript

reactjs

react-typescript

react-query