How can I use react-query in a React class component?

Question

I realised: If I want to use hooks import { useQuery } from 'react-query' I can only do that in React function components.

Do I have to rewrite my old class components in the React function syntax, or is there an easy way to use react-query with the class syntax?

I'm sure it's documented somewhere, but I could only find tutorials using React function components.

TkDodo · Accepted Answer · 2021-01-07 10:41:12Z

13

It’s quite easy to re-implement it with a render props pattern. From a 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>

answered Jan 7, 2021 at 10:41

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Build Though Over a year ago

how to initialize it in app.js

Mostafa Hesham Over a year ago

prop key was undefined for me I think because it's used by React for component reference.

twice · Accepted Answer · 2023-02-21 15:20:43Z

as an extension to TkDodo's answer: 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);
};

keul · Accepted Answer · 2021-01-07 09:37:28Z

-1

Officially hooks (in general) can be only used inside functional React components. See FAQs

You can:

rewrite your component (this is probably something that worth it on the long run… there are many other interesting hooks libs out there)
try to isolate the code that needs react-query to a functional super-component. This can be hard but it depends on your code. Please note that hooks are not black magic, they are a pattern so it is possible to use them as HOC (Google for "use hooks in class component" and you'll find many examples).

answered Jan 7, 2021 at 9:37

keul

7,83928 silver badges48 bronze badges

1 Comment

Devin Clark Over a year ago

Neither of these points are correct. To the first bullet, one of the main benefits of React and their upgrades is that old syntax (like class based components) will always work. If you have old class components that haven't been updated in years and work fine, just leave them be. Second, just follow the example by TKDodo above.

Collectives™ on Stack Overflow

How can I use react-query in a React class component?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related