Hi, is React query available for class components ?

[sktguha]

Hi, is React query available for class components ? I searched the documentation but didn't find anything.
Or if not, are there any plans to add support in future ? I know hooks are the recommended approach by the React team but still lots of existing code still uses class components.

Thanks in advance

[TkDodo]

Quickly quoting Tanner on this:

It’s actually not too hard to make hoc/render-prop versions of the hooks

function UseQuery (props) {
  return props.children(useQuery(props.key, props.fn, props.options))
}

<UseQuery
  key=“todos”
  fn={() => getTodos()}
  options={{ staleTime: 5000 }}
>
  {query => {. . .}}
</UseQuery>

And now you can use them in a class component.

[lidaof]

do you have an example on using it in class? thanks!

[TkDodo]

The example above can be used in a class component...

[lidaof]

thank you so much for reply @TkDodo . Do you happen to have any codesandbox demo too? (I didn't quite get this one -,-)

[sergiodxa]

@lidaof something like this https://codesandbox.io/s/example-using-react-query-as-render-props-in-a-class-component-7vjlu

[lidaof]

saved my day! thank you so much!!! @sergiodxa

[retnag]

In case you wonder how to correctly type this HOC using typescript:

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);
};