concerns about passing null as fetcher

Background

@pacocoursey 's idea for SWR as a local cache is great.

const useSharedState = (key, initial) => {
  const { data: state, mutate: setState } = useSWR(key, {
    initialData: initial
  })
  return [state, setState]
}

But after #367 this won’t work anymore because window.fetch will be used when fn is undefined https://github.com/vercel/swr/blob/10e18cc9e6e607309db1aee81ac22b58690a76c3/src/use-swr.ts#L245-L248

However passing null as fetcher will work since we only replace the fetcher to window.fetch when fetcher is undefined.

useSWR(key, null ,{ initialData: initial })

But the typescript will complain this kind of usage. #730 fix this problem by accepting null as as the fetcher function.

Problem

1. This usage is not well documented.
2. passing null as the fetcher function is like a hack here to disable the whole stale-while-revalidate process in swr. I am not sure it is a good api design. I feel like it somehow leaks the implementation details.
3. Passing null as the fetcher function makes most of the options useless here.

useSWR(key, null ,{ initialData: initial, /** most of options here will not be used since the revalidation is disabled here */ })

Possible alternatives

1. a passive options and a different options type

useSWR(key, { 
  initialData: initial, 
  passive: true 
  /** typescript should complain about set options like onSuccess 
  which will only be used at  stale-while-revalidate process  */
})

1. a new hooks share the caches

const { data: state, mutate: setState } = useSWRPassive(key, { initialData })

[shuding]

In SWR 1.0, there is no more default fetcher so you don’t need to pass null as fetcher anymore. Also we think the fallback API is a better way to provide “initial data”. I think we can close this issue now 😃

[lukeshumard]

I’ve spent a little bit of time playing around with this, also inspired by @pacocoursey’s blog post. His approach is a very eloquent and simple solution, but it is important to consider what using null as a fetcher means.

By passing null as the fetcher, any attempts to fetch data will return as null. This sounds obvious, but it’s important to remember that SWR can be configured to revalidate your data on focus and reconnect. If either of these events occur, the fetcher is called and your data is now null. Additionally, calling mutate could also trigger a revalidation so it’s important to be mindful of this.

Here’s my useSharedState hook based off of @shuding’s suggestion.

import useSWR from 'swr'

export default function useSharedState(key, initialData) {
  return useSWR(key, null, {
    initialData,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  })
}

In use, it looks like this.

const { data, mutate } = useSharedState('username', 'luke')

As long as the fetcher is not called again, this will result in having shared state between hooks in a single page.