Merge branch 'master' into fix-staleRef

Author: promer94

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swr",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "description": "React Hooks library for remote data fetching",
   "main": "./dist/index.js",
   "module": "./esm/index.js",

src/config.ts

@@ -70,7 +70,8 @@ const defaultConfig: ConfigInterface = {
 
   fetcher: webPreset.fetcher,
   isOnline: webPreset.isOnline,
-  isDocumentVisible: webPreset.isDocumentVisible
+  isDocumentVisible: webPreset.isDocumentVisible,
+  isPaused: () => false
 }
 
 export { cache }

src/types.ts

@@ -22,6 +22,7 @@ export interface ConfigInterface<
 
   isOnline?: () => boolean
   isDocumentVisible?: () => boolean
+  isPaused?: () => boolean
   onLoadingSlow?: (key: string, config: ConfigInterface<Data, Error>) => void
   onSuccess?: (
     data: Data,

src/use-swr-infinite.ts

@@ -5,6 +5,7 @@ import SWRConfigContext from './swr-config-context'
 import useSWR from './use-swr'
 
 import { keyType, fetcherFn, ConfigInterface, responseInterface } from './types'
+
 type KeyLoader<Data = any> = (
   index: number,
   previousPageData: Data | null
@@ -151,7 +152,7 @@ function useSWRInfinite<Data = any, Error = any>(
         const shouldRevalidatePage =
           revalidateAll ||
           force ||
-          (typeof force === 'undefined' && i === 0) ||
+          (typeof force === 'undefined' && i === 0 && originalData) ||
           (originalData && !config.compare(originalData[i], pageData)) ||
           typeof pageData === 'undefined'
 

src/use-swr.ts

@@ -379,6 +379,7 @@ function useSWR<Data = any, Error = any>(
     ): Promise<boolean> => {
       if (!key || !fn) return false
       if (unmountedRef.current) return false
+      if (configRef.current.isPaused()) return false
       revalidateOpts = Object.assign({ dedupe: false }, revalidateOpts)
 
       let loading = true
@@ -502,6 +503,12 @@ function useSWR<Data = any, Error = any>(
       } catch (err) {
         delete CONCURRENT_PROMISES[key]
         delete CONCURRENT_PROMISES_TS[key]
+        if (configRef.current.isPaused()) {
+          dispatch({
+            isValidating: false
+          })
+          return false
+        }
 
         cache.set(keyValidating, false)
         cache.set(keyErr, err)
@@ -686,15 +693,18 @@ function useSWR<Data = any, Error = any>(
         await revalidate({ dedupe: true })
       }
       // Read the latest refreshInterval
-      if (configRef.current.refreshInterval) {
+      if (configRef.current.refreshInterval && timer) {
         timer = setTimeout(tick, configRef.current.refreshInterval)
       }
     }
     if (configRef.current.refreshInterval) {
       timer = setTimeout(tick, configRef.current.refreshInterval)
     }
     return () => {
-      if (timer) clearTimeout(timer)
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
     }
   }, [
     config.refreshInterval,

test/use-swr-infinite.test.tsx

@@ -6,7 +6,7 @@ import {
   act
 } from '@testing-library/react'
 
-import { useSWRInfinite } from '../src'
+import { useSWRInfinite, mutate } from '../src'
 
 describe('useSWRInfinite', () => {
   it('should render the first page component', async () => {
@@ -59,7 +59,7 @@ describe('useSWRInfinite', () => {
     let pageData = ['apple', 'banana', 'pineapple']
 
     function Page() {
-      const { data, mutate } = useSWRInfinite<string, string>(
+      const { data, mutate: boundMutate } = useSWRInfinite<string, string>(
         index => [`pagetest-3`, index],
         async (_, index) => {
           await new Promise(res => setTimeout(res, 100))
@@ -74,7 +74,7 @@ describe('useSWRInfinite', () => {
         <div
           onClick={() => {
             // reload the entire list
-            mutate()
+            boundMutate()
           }}
         >
           {data}
@@ -441,4 +441,26 @@ describe('useSWRInfinite', () => {
       expect(setSize).toEqual(setters[0])
     }
   })
+
+  it('should share initial cache from `useSWR`', async () => {
+    const cachedData = new Date().toISOString()
+    mutate('shared-cache-0', cachedData)
+
+    function Page() {
+      const { data } = useSWRInfinite<string, string>(
+        index => `shared-cache-${index}`,
+        async () => {
+          await new Promise(res => setTimeout(res, 200))
+          return cachedData
+        }
+      )
+
+      return <div>{data}</div>
+    }
+    const { container } = render(<Page />)
+    expect(container.textContent).toMatchInlineSnapshot(`""`)
+    // after a rerender we should already have the cached data rendered
+    await act(() => new Promise(res => setTimeout(res, 10)))
+    expect(container.textContent).toMatchInlineSnapshot(`"${cachedData}"`)
+  })
 })

test/use-swr.test.tsx

@@ -724,6 +724,57 @@ describe('useSWR - refresh', () => {
     const secondContent = container.firstChild.textContent
     expect(firstContent).toEqual(secondContent)
   })
+
+  it('should not let the previous interval timer to set new timer if key changes too fast', async () => {
+    function sleep(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms))
+    }
+    const fetcherWithToken = jest.fn(async token => {
+      await sleep(200)
+      return token
+    })
+    function Page() {
+      const [count, setCount] = useState(0)
+      const { data } = useSWR(count.toString(), fetcherWithToken, {
+        refreshInterval: 100,
+        dedupingInterval: 50
+      })
+      return (
+        <button
+          onClick={() => setCount(count + 1)}
+        >{`click me ${data}`}</button>
+      )
+    }
+    const { container } = render(<Page />)
+
+    // initial revalidate
+    await act(() => sleep(200))
+    expect(fetcherWithToken).toBeCalledTimes(1)
+
+    // first refresh
+    await act(() => sleep(100))
+    expect(fetcherWithToken).toBeCalledTimes(2)
+    expect(fetcherWithToken).toHaveBeenLastCalledWith('0')
+    await act(() => sleep(200))
+
+    // second refresh start
+    await act(() => sleep(100))
+    expect(fetcherWithToken).toBeCalledTimes(3)
+    expect(fetcherWithToken).toHaveBeenLastCalledWith('0')
+    // change the key during revalidation
+    // The second refresh will not start a new timer
+    fireEvent.click(container.firstElementChild)
+
+    // first refresh with new key 1
+    await act(() => sleep(100))
+    expect(fetcherWithToken).toBeCalledTimes(4)
+    expect(fetcherWithToken).toHaveBeenLastCalledWith('1')
+    await act(() => sleep(210))
+
+    // second refresh with new key 1
+    expect(fetcherWithToken).toBeCalledTimes(5)
+    expect(fetcherWithToken).toHaveBeenLastCalledWith('1')
+  })
 })
 
 describe('useSWR - revalidate', () => {
@@ -1875,15 +1926,15 @@ describe('useSWR - local mutation', () => {
   })
 })
 
-describe('useSWR - context configs', () => {
+describe('useSWR - configs', () => {
   afterEach(cleanup)
 
   it('should read the config fallback from the context', async () => {
     let value = 0
     const fetcher = () => value++
 
     function Section() {
-      const { data } = useSWR('dynamic-10')
+      const { data } = useSWR('config-0')
       return <div>data: {data}</div>
     }
     function Page() {
@@ -1905,6 +1956,57 @@ describe('useSWR - context configs', () => {
     await act(() => new Promise(res => setTimeout(res, 110))) // update
     expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 1"`)
   })
+
+  it('should stop revalidations when config.isPaused returns true', async () => {
+    const key = 'config-1'
+    let value = 0
+    const fetcher = () => {
+      if (value === 2) throw new Error()
+      return value++
+    }
+    const revalidate = () => mutate(key)
+
+    function Page() {
+      const [paused, setPaused] = useState(false)
+      const { data, error } = useSWR(key, fetcher, {
+        revalidateOnMount: true,
+        refreshInterval: 200,
+        isPaused() {
+          return paused
+        }
+      })
+
+      useEffect(() => {
+        // revalidate on mount and turn to idle
+        setPaused(true)
+      }, [])
+
+      return (
+        <div onClick={() => setPaused(!paused)}>
+          {error ? error : `data: ${data}`}
+        </div>
+      )
+    }
+    const { container } = render(<Page />)
+
+    await waitForDomChange({ container })
+    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 0"`)
+    await act(async () => await 0)
+    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 0"`)
+    revalidate()
+    await act(async () => await 0)
+    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 0"`)
+    revalidate()
+    fireEvent.click(container.firstElementChild)
+    await act(async () => await 0)
+    revalidate()
+    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 0"`)
+    await act(async () => await 0)
+    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 1"`)
+    fireEvent.click(container.firstElementChild)
+    await act(async () => await new Promise(res => setTimeout(res, 400)))
+    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 1"`)
+  })
 })
 
 describe('useSWR - suspense', () => {