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.

Answer 1

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>