Question

21

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

rated 0 times [ 28] [ 7] / answers: 1 / hits: 12338 / 3 Years ago, tue, march 23, 2021, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cristoferjordih

Add To Favorites

Follow

Total Points: 513

Total Questions: 96

Total Answers: 105

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

cristoferjordih questions

1 How do you use Web Workers with Webpack 5?

Fri, Mar 19, 21, 00:00, 3 Years ago

1 Clear way to use canvas html5 with React without render all canvas shapes all time

Tue, Jan 19, 21, 00:00, 3 Years ago

1 React is slow when rendering many elements

Wed, Oct 14, 20, 00:00, 4 Years ago

1 js-cookie with sameSite None & secure

Thu, Jul 23, 20, 00:00, 4 Years ago

1 Save canvas data as mp4 - Javascript

Sun, Jul 12, 20, 00:00, 4 Years ago

View All

answered 3 Years ago zoey · Accepted Answer

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

}