javascriptreactjsfetchreact-queryswr

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


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.

Is there any proper way to do this?


Solution

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