使用render props模式重新实现它非常容易。从github discussion：

function UseQuery (props) {
  return props.children(useQuery(props.key, props.fn, props.options))
}
<UseQuery
  key=“todos”
  fn={() => getTodos()}
  options={{ staleTime: 5000 }}
>
  {query => {. . .}}
</UseQuery>

正式挂钩（一般情况下）只能在功能性React组件内部使用。See FAQs
您可以：

• 重写组件（从长远来看，这可能是值得的......还有许多其他有趣的钩子库）
• 尝试将需要react-query的代码隔离到一个函数超组件中。这可能很难，但这取决于你的代码。请注意，钩子不是黑魔法，它们是一种模式，因此可以将它们用作HOC（谷歌一下"在类组件中使用钩子"，你会发现很多例子）。

作为TkDodo答案的延伸：如果您想知道如何使用 typescript 正确键入此HOC：

import { useQuery, QueryKey, QueryFunction, UseQueryOptions, UseQueryResult } from 'react-query';

type Props<
  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'>;
  children: (params: UseQueryResult<TData, TError>) => JSX.Element;
};

/**
 * Utility component for using React-Query in class components
 */
export const UseQuery = <
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
>(
  props: Props<TQueryFnData, TError, TData, TQueryKey>
) => {
  const query = useQuery(props.queryKey, props.queryFn, props.options);
  return props.children(query);
};