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?

I remember there was the `forceFetchOnMount` property in the previous version, but it's replaced by `refetchOnMount` in version 3. — Ever Dev, Mar 23 '21 at 03:52

TkDodo · Accepted Answer · 2021-03-23T20:03:04.820

9

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

edited Mar 23 '21 at 20:03

answered Mar 23 '21 at 10:03

TkDodo

20,449
3
50
65

Is there anyway to do similar using `queryClient`? – Ever Dev Mar 23 '21 at 13:57
I think you can have a disabled query and still do `queryClient.refetchQueries(key)` - this is similar to the `refetch` method returned from `useQuery` – TkDodo Mar 23 '21 at 14:15
Is there a way to prevent fetching when `refetch method` get called? – Mykyta Jan 10 '22 at 13:05

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

1 Answers1