revalidateOnMount flag that disable automatic revalidation on mount (#…

…225)

* Added autoLoad flag which defaults to true and disable automatic revalidation on mount

* Fixed config usage

* Added test coverage

* Update src/use-swr.ts

Co-Authored-By: Shu Ding <ds303077135@gmail.com>

* Update test/use-swr.test.tsx

Co-Authored-By: Shu Ding <ds303077135@gmail.com>

* Renamed option to revalidateInitialData, updated documentation README to explain usage

* Update src/use-swr.ts

Co-Authored-By: Sergio Xalambrí <hello@sergiodxa.com>

* Renamed config, fixed source, docs and tests

* Changed revalidateOnMount to a 3-state flag

* removed example from readme

Co-authored-by: Shu Ding <ds303077135@gmail.com>
Co-authored-by: Sergio Xalambrí <hello@sergiodxa.com>

README.md

@@ -113,6 +113,7 @@ const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)
 - `suspense = false`: enable React Suspense mode [(details)](#suspense-mode)
 - `fetcher = undefined`: the default fetcher function
 - `initialData`: initial data to be returned (note: This is per-hook)
+- `revalidateOnMount`: enable or disable automatic revalidation when component is mounted (by default revalidation occurs on mount when initialData is not set, use this flag to force behavior)
 - `revalidateOnFocus = true`: auto revalidate when window gets focused
 - `revalidateOnReconnect = true`: automatically revalidate when the browser regains a network connection (via `navigator.onLine`)
 - `refreshInterval = 0`: polling interval (disabled by default)

src/types.ts

@@ -13,6 +13,7 @@ export interface ConfigInterface<
   refreshWhenHidden?: boolean
   refreshWhenOffline?: boolean
   revalidateOnFocus?: boolean
+  revalidateOnMount?: boolean
   revalidateOnReconnect?: boolean
   shouldRetryOnError?: boolean
   fetcher?: Fn

src/use-swr.ts

@@ -381,7 +381,10 @@ function useSWR<Data = any, Error = any>(
     const softRevalidate = () => revalidate({ dedupe: true })
 
     // trigger a revalidation
-    if (!config.initialData) {
+    if (
+      config.revalidateOnMount ||
+      (!config.initialData && config.revalidateOnMount === undefined)
+    ) {
       if (
         typeof latestKeyedData !== 'undefined' &&
         !IS_SERVER &&

test/use-swr.test.tsx

@@ -81,6 +81,35 @@ describe('useSWR', () => {
     )
   })
 
+  it('should not call fetch function when revalidateOnMount is false', async () => {
+    const fetch = jest.fn(() => 'SWR')
+
+    function Page() {
+      const { data } = useSWR('revalidateOnMount', fetch, {
+        revalidateOnMount: false
+      })
+      return <div>hello, {data}</div>
+    }
+
+    render(<Page />)
+    expect(fetch).not.toHaveBeenCalled()
+  })
+
+  it('should call fetch function when revalidateOnMount is true even if initialData is set', async () => {
+    const fetch = jest.fn(() => 'SWR')
+
+    function Page() {
+      const { data } = useSWR('revalidateOnMount', fetch, {
+        revalidateOnMount: true,
+        initialData: 'gab'
+      })
+      return <div>hello, {data}</div>
+    }
+
+    render(<Page />)
+    expect(fetch).toHaveBeenCalled()
+  })
+
   it('should dedupe requests by default', async () => {
     let count = 0
     const fetch = () => {