How to revalidate but RESPECTING dedupingInterval

[SleeplessByte]

There are a few open issues and PRs related: #271 #482 #417 #519

---

The issue is as follows. Given the following:

• There are several environments where the "focus" hooks can not be polyfilled / don't work with swr, such as react-native.
• There are circumstances where an active app/window isn't the same as an active "anything" (swr uses visibility API under som circumstances to solve this), such as using a navigation library and having components hidden. These navigation libraries often expose their own focus events.
• There are packages that do a better job than navigator.onLine such as NetInfo, but also pubnub's connectivity check, but there is no way to use these to detect if something is online.

Now, when using one or multiple things above (e.g. react-navigation or react-router), you probably want to use the following configuration, if you need anything special (see headings below):

{
  dedupingInterval: 15 * 1000,
  revalidateOnMount: false,
  revalidateOnReconnect: false,
  revalidateOnFocus: false
}

Visibility (instead of Mount)

Then, for those components/hooks that are used in Dialogs, where you want to refetch on "visibility" (which feels like mount), you can handle this yourself:

useEffect(() => {
  if (!visible) {
    return
  }

  revalidate()
}, [visible])

The issue with the above is that if somewhere in the tree you already fetched this data, revalidate forces a revalidation (basically broken by design, mentioned in #271).

A few alternatives that would respect dedupingInterval that are already possible:

// Fetcher has the useSWRHook, so this would act like a mount. Set `revalidateOnMount` to true.
visible && <Fetcher onDataChanged={setData} />

// When not visible, "break" swr, doesn't work well with Suspense, requires "prop drilling" with custom hooks
useSWR(visible ? 'key' : null)

// Or explicitly break, making visible a dependency
useSWR(() => {
  if (!visible) {
    throw new Error('Not visible')
  }

  return 'key'
})

Userland focus (instead of global window Focus)

For "screen", you probably want to handle focus yourself:

useFocusEffect(revalidate, [revalidate])

Again, if multiple hooks request the same key, this will force requests multiple times, disrespecting dedupingInterval.
The same alternatives are usually possible for this issue.

Userland online (instead of browser online)

Some services/libraries expose net-connectivity, and you only want to revalidate when those change (think: flaky service, websockets, duplexes, failover's and non-traditional network connections), as well as be able to use your own method of net-connectivity instead of navigator.onLine which is true when there is a connection even when there is no internet.

Again, we can handle this ourselves:

const { isInternetReachable } = useNetInfo()

useEffect(() => {
  if (!isInternetReachable) { 
    return
  }

  revalidate()
}, [isInternetReachable]

Again, the same "workarounds" can be used to use the deduping issues.

Problem

Using the workaround feels both very against the grain, and also don't compose at all. I basically need a HOC that exposes a way to create a useSWR which is conditionally mounted in order to be able to use all the dedupingBehaviour / rerender guards. I don't think that's as intended.

Possible solutions

#417 gives a glimpse of what could be made, which I suggest is implemented for all the "revalidate" checks:

• custom online
• custom focus
• custom mount

If #417 had an implementation (move all these "detectors" to configuration), the question for me would be resolved. The react-query implementation is having a custom hook that changes the detector.

setFocusHandler(handleFocus => {
   // Listen to visibillitychange and focus
   if (typeof window !== 'undefined' && window.addEventListener) {
     window.addEventListener('visibilitychange', handleFocus, false)
     window.addEventListener('focus', handleFocus, false)
   }
 
   return () => {
     // Be sure to unsubscribe if a new handler is set
     window.removeEventListener('visibilitychange', handleFocus)
     window.removeEventListener('focus', handleFocus)
   }
 })

But realistically, before that is implemented, adding shouldDedupe (similar to shouldRevalidate on mutate) as optional argument to revalidate would solve all these issues in one go.

Am I missing something? I can create minimal working examples that show this issue, but I think it's clear. Feel free to ask me tho.

[SleeplessByte]

FWIW, I moved to react-query.