How to prevent react-query from fetching initially but enables refetching?

Question

I'm using react-query v3.13 to fetch data from API.
What I want to do is to fetch API regularly from a certain point (for example, when clicking the start button), not from the time of calling useQuery.

I tried the following ways.

• set enabled property to false to disable automatic querying but it also disables re-fetching.
  I could not find a way to re-enable/set the enabled property to true. And I had to use setTimeout by myself to re-fetch regularly.
• keep enabled property as true but I could not find a way to disable the initial fetching.

Is there any proper way to do this?

Answer 1

if you hardcode the enabled option to false, you can still use the refetch method you get back from useQuery to imperatively trigger a fetch. But the query will still be disabled, so no background updates.

if you want a lazy that is disabled, but enables when you call a function, the best way would be with a simple abstraction over useQuery with a local state:

const useLazyQuery = (key, fn, options) => {
  const [enabled, setEnabled] = useState(false)
  return [() => setEnabled(true), useQuery(key, fn, { ...options, enabled })]
}