javascript - React-Query的useQuery的几个泛型怎么使用？

Question

export declare function useQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options?: Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey' | 'queryFn'>): UseQueryResult<TData, TError>;

上面是定义，这四个泛型都表示什么意思呢，实践中要怎么用

• TQueryFnData = unknown
• TError = unknown
• TData = TQueryFnData
• TQueryKey extends QueryKey = QueryKey

Answer 1

理论上，这些泛型是可以通过类型推导的方式得出的，不需要你自己传入相关的类型。

最好的办法是将你的 fetcher callback 使用 QueryResult 进行类型标注

async function fetchTodos(): QueryResult<Todo[], Error> {
    const response = await fetch("...")
    if (!response.ok) {
        throw Error("...")    
    }
    return await response.json()
}

Answer 2

类型参数的含义：

• TQueryFnData: 表示进行查询操作时返回的数据的类型。默认值为 unknown，即不知道类型，通常需要根据具体数据源的返回值定义相应的类型，以提高代码可读性并减少类型错误。
• TError: 表示在查询过程中可能出现的错误类型。默认值同样为 unknown，但通常对于不同的数据源会有相应的错误类型约定，因此可以根据实际情况进行定义。例如，在 API 接口调用中可能会出现网络连接异常、身份认证失败等不同类型的错误，针对这些错误可以自定义不同的异常类来表示。通过给 TError 参数指定正确的泛型类型，可以使得在代码中使用时类型检查生效。
• TData: 表示最终返回给组件渲染的数据类型。默认值为 TQueryFnData，即与查询函数的返回值类型相同。将泛型参数做绑定使得通过 useQuery 定义的 hook 在获取数据后直接能返回预期的数据格式。
• TQueryKey extends QueryKey = QueryKey: 表示传递给查询函数的查询键（query key）的类型，它必须是一个数组类型或对象类型。默认值为 QueryKey，即 query key 可以是任何一种类型。在使用 useQuery 时需要根据实际查询的数据源来指定具体的查询键类型以及其格式。

当使用 useQuery 时，可以通过对泛型参数提供正确的类型绑定，让 React Query 在获取数据和处理异常时更加可靠和灵活。

interface Item {
  id: number;
  name: string;
}

// 定义一个接口类型用于声明 API 接口返回的数据结构
interface ListResponse {
  total: number;
  items: Item[];
}

function useItemList() {
  const queryKey = ['item-list'];
  const queryFn = (): Promise<ListResponse> => {
    return fetch('/api/item').then(res => res.json());
  };
  
  // 给 useQuery 函数传递泛型参数，指定其返回值类型、错误类型及数据类型等信息
  return useQuery<ListResponse, Error, Item[], typeof queryKey>(queryKey, queryFn);
}