fix: revalidate with initialData when changing the key (#961)

* fix: revalidate with initialData when changing the key

* test: add the return data when a request is in flight

* test: return initialData while revalidating

src/use-swr.ts

@@ -232,9 +232,9 @@ function useSWR<Data = any, Error = any>(
     ? args[1]
     : args.length === 2 && typeof args[1] === 'function'
     ? args[1]
-    : /** 
-          pass fn as null will disable revalidate 
-          https://paco.sh/blog/shared-hook-state-with-swr 
+    : /**
+          pass fn as null will disable revalidate
+          https://paco.sh/blog/shared-hook-state-with-swr
         */
     args[1] === null
     ? args[1]
@@ -558,6 +558,7 @@ function useSWR<Data = any, Error = any>(
     // after `key` updates, we need to mark it as mounted
     unmountedRef.current = false
 
+    const isUpdating = initialMountedRef.current
     initialMountedRef.current = true
 
     // after the component is mounted (hydrated),
@@ -579,7 +580,10 @@ function useSWR<Data = any, Error = any>(
     const softRevalidate = () => revalidate({ dedupe: true })
 
     // trigger a revalidation
-    if (willRevalidateOnMount()) {
+    if (
+      isUpdating ||
+      willRevalidateOnMount()
+    ) {
       if (typeof latestKeyedData !== 'undefined' && !IS_SERVER) {
         // delay revalidate if there's cache
         // to not block the rendering

test/use-swr-integration.test.tsx

@@ -1,5 +1,5 @@
-import { act, render, screen } from '@testing-library/react'
-import React, { useEffect } from 'react'
+import { act, render, screen, fireEvent } from '@testing-library/react'
+import React, { useState, useEffect } from 'react'
 import useSWR from '../src'
 import { sleep } from './utils'
 
@@ -311,6 +311,50 @@ describe('useSWR', () => {
     )
   })
 
+  it('should revalidate even if initialData is provided', async () => {
+    const fetcher = async key => {
+      await sleep(50)
+      return key
+    }
+
+    function Page() {
+      const [key, setKey] = useState('initial-data-with-initial-data')
+      const { data } = useSWR(key, fetcher, {
+        initialData: 'Initial'
+      })
+      return (
+        <div onClick={() => setKey('initial-data-with-initial-data-update')}>
+          {data ? `hello, ${data}` : 'loading'}
+        </div>
+      )
+    }
+
+    const { container } = render(<Page />)
+
+    // render with the initial data
+    await screen.findByText('hello, Initial')
+
+    await act(() => sleep(1))
+    fireEvent.focus(window)
+
+    await screen.findByText('hello, initial-data-with-initial-data')
+
+    // change the key
+    await act(() => sleep(1))
+    fireEvent.click(container.firstElementChild)
+
+    // a request is still in flight
+    await act(() => sleep(10))
+    // while validating, SWR returns the initialData
+    // https://github.com/vercel/swr/pull/961/files#r588928241
+    expect(container.firstChild.textContent).toMatchInlineSnapshot(
+      `"hello, Initial"`
+    )
+
+    // render with data the fetcher returns
+    await screen.findByText('hello, initial-data-with-initial-data-update')
+  })
+
   it('should set config as second parameter', async () => {
     const fetcher = jest.fn(() => 'SWR')