fix: Return undefined data if key's falsy under suspense mode (vercel#1698)

Author: icyJoseph

src/use-swr.ts

@@ -498,7 +498,7 @@ export const useSWRHandler = <Data = any, Error = any>(
   // If there is `error`, the `error` needs to be thrown to the error boundary.
   // If there is no `error`, the `revalidation` promise needs to be thrown to
   // the suspense boundary.
-  if (suspense && isUndefined(data)) {
+  if (suspense && isUndefined(data) && key) {
     throw isUndefined(error) ? revalidate(WITH_DEDUPE) : error
   }
 

test/use-swr-config.test.tsx

@@ -1,12 +1,7 @@
 import { act, screen, fireEvent } from '@testing-library/react'
 import React, { useEffect, useState } from 'react'
 import useSWR, { SWRConfig, useSWRConfig, Middleware } from 'swr'
-import {
-  sleep,
-  renderWithConfig,
-  createKey,
-  renderWithGlobalCache
-} from './utils'
+import { renderWithConfig, createKey, renderWithGlobalCache } from './utils'
 
 describe('useSWR - configs', () => {
   it('should read the config fallback from the context', async () => {
@@ -30,8 +25,7 @@ describe('useSWR - configs', () => {
     await screen.findByText('data: 0')
 
     // wait for the refresh interval
-    await act(() => sleep(INTERVAL * 1.5))
-    screen.getByText('data: 1')
+    await screen.findByText('data: 1')
   })
 
   it('should stop revalidations when config.isPaused returns true', async () => {

test/use-swr-suspense.test.tsx

@@ -1,5 +1,11 @@
 import { act, fireEvent, screen } from '@testing-library/react'
-import React, { ReactNode, Suspense, useEffect, useState } from 'react'
+import React, {
+  ReactNode,
+  Suspense,
+  useEffect,
+  useReducer,
+  useState
+} from 'react'
 import useSWR, { mutate } from 'swr'
 import {
   createKey,
@@ -274,4 +280,40 @@ describe('useSWR - suspense', () => {
     expect(startRenderCount).toBe(2) // fallback + data
     expect(renderCount).toBe(1) // data
   })
+
+  it('should return `undefined` data for falsy key', async () => {
+    const key = createKey()
+    const Section = ({ trigger }: { trigger: boolean }) => {
+      const { data } = useSWR(
+        trigger ? key : null,
+        () => createResponse('SWR'),
+        {
+          suspense: true
+        }
+      )
+      return <div>{data || 'empty'}</div>
+    }
+
+    const App = () => {
+      const [trigger, toggle] = useReducer(x => !x, false)
+      return (
+        <div>
+          <button onClick={toggle}>toggle</button>
+          <Suspense fallback={<div>fallback</div>}>
+            <Section trigger={trigger} />
+          </Suspense>
+        </div>
+      )
+    }
+
+    renderWithConfig(<App />)
+
+    await screen.findByText('empty')
+
+    fireEvent.click(screen.getByRole('button'))
+
+    screen.getByText('fallback')
+
+    await screen.findByText('SWR')
+  })
 })