Typescript+React中使用useQuery出现QueryFunction类型不匹配报错如何解决

• 自定义的Param类型和React Query官方QueryFunction定义的入参类型不匹配。官方QueryFunction的入参是包含queryKey、pageParam、signal等属性的上下文对象，你自定义的Param类型未完整覆盖官方要求的类型字段，触发TypeScript静态类型校验报错。
• 运行时功能正常是因为你实际只用到了上下文中确实存在的queryKey属性，类型校验不影响JS实际执行逻辑，所以请求和onSuccess回调都能正常运行。

方案1：使用官方类型定义请求函数（推荐） #

直接导入React Query内置的QueryFunction类型标注请求函数，不需要自定义Param类型：

// 导入官方类型
import { useQuery, QueryFunction } from '@tanstack/react-query';

// 给fetchFunction标注官方QueryFunction类型，泛型依次为返回值类型、queryKey类型
const fetchFunction: QueryFunction<IResponsePlanets, [string, { page: number }]> = async (param) => {
    const [key, { page }] = param.queryKey;
    const response = await fetch(`https://swapi.dev/api/planet/?page=${page}`);
    return response.json() as Promise<IResponsePlanets>;
};

方案2：修正自定义Param类型 #

如果需要保留自定义参数类型，继承官方的QueryFunctionContext即可：

import { useQuery, QueryFunctionContext } from '@tanstack/react-query';

// 继承官方上下文类型，自动匹配所有要求的属性
type Param = QueryFunctionContext<[string, { page: number }]>;

// 后续fetchFunction和原有逻辑保持不变即可
const fetchFunction = async (param: Param) => {
    const [key, { page }] = param.queryKey;
    const response = await fetch(`https://swapi.dev/api/planet/?page=${page}`);
    return response.json();
};

额外语法修正 #

你提供的useQuery调用代码末尾缺少右括号，修正后代码如下：

const { status, error, data } = useQuery<IResponsePlanets, Error>(["planets", { page: 1 }], fetchFunction, {
     staleTime: 5000,
     onSuccess: () => {
         console.log('working👍')
     }
});

内容的提问来源于stack exchange，提问作者Naveed Ali Rehmani