enable/disable SWR

[scucchiero]

Alright so I am not sure if currently there is a way to do it, but I noticed some times I need to do some ugly things to prevent SWR to fetch in the first render.

Take the next example of a search bar.

const [query, setQuery] = useState("")
const { data: results } = useSWR('/search' + query, fetcher)

That would trigger a request in the first render.

Whereas something like this wouldn't

const [query, setQuery] = useState("")
const { data: results } = useSWR('/search' + query, fetcher, { enabled: Boolean(query)) )

[koba04]

@scucchiero
What about using the conditional fetch?
https://swr.vercel.app/docs/conditional-fetching#conditional

const [query, setQuery] = useState("")
const { data: results } = useSWR(query ? '/search' + query : null, fetcher)

[scucchiero]

Indeed that'd work for my personal use case, I missed it in the docs! Thank you.
I was thinking perhaps it'd be interesting to support a global disable option but I can't think of a realistic use case so I'd call it a night.

[ivan-kleshnin]

React-Query has a great concept of "enabled" queries. Disabled queries will never fetch but they are able to see the data loaded with the same key. It comes in handy in many situations. E.g. you have a stack of fetchMe-dependent components:

useQuery("/api/me", fetchMe) -- in component #1
...
  useQuery("/api/me", fetchMe, {enabled: false}) -- in component #1.1
  ...
  useQuery("/api/me", fetchMe, {enabled: false}) -- in component #1.2

and now you can disable authentication just by commenting out the ROOT useQuery("/api/me").

In SWR you can disable useQuery with key == null pattern but you'd have to go and update EACH instance of useQuery("/api/me").

That's one of the multiple reasons I switched from SWR to React-Query 😅

[huozhi]

SWR has a isPaused() option in config, does it solve your problem? checkout options doc

useSWR('/api/me', fetchMe, { isPaused() { return true } })

[shuding]

Out of curiosity, isn't it the same that you have to update the option of each useQuery hook to { enabled: false }? Another thing I'm worried about is that if the first hook (which is enabled) is accidentally removed in a code refactoring, or unmounted during rendering, other hooks will not have the data.

In SWR 1.0 you will have a new option revalidateIfStale: false that solves this perfectly: only one hook will fetch and others will share the cache.