fix: delay revalidation if a key is already active and has error (#2338)

* fix: delay revalidation if a key is already active and has error

close #2336

* apply code review

* test: add test case for isValidating

core/use-swr.ts

@@ -183,6 +183,10 @@ export const useSWRHandler = <Data = any, Error = any>(
   )
 
   const isInitialMount = !initialMountedRef.current
+
+  const hasRevalidator =
+    EVENT_REVALIDATORS[key] && EVENT_REVALIDATORS[key].length > 0
+
   const cachedData = cached.data
 
   const data = isUndefined(cachedData) ? fallback : cachedData
@@ -201,6 +205,9 @@ export const useSWRHandler = <Data = any, Error = any>(
   // - Not suspense mode and there is no fallback data and `revalidateIfStale` is enabled.
   // - `revalidateIfStale` is enabled but `data` is not defined.
   const shouldDoInitialRevalidation = (() => {
+    // if a key already has revalidators and also has error, we should not trigger revalidation
+    if (hasRevalidator && !isUndefined(error)) return false
+
     // If `revalidateOnMount` is set, we take the value directly.
     if (isInitialMount && !isUndefined(revalidateOnMount))
       return revalidateOnMount

test/use-swr-error.test.tsx

@@ -494,4 +494,60 @@ describe('useSWR - error', () => {
     // Since there's only 1 request fired, only 1 error event should be reported.
     expect(errorEvents.length).toBe(1)
   })
+
+  it('should not should not trigger revalidation when a key is already active and has error - isLoading', async () => {
+    const key = createKey()
+    const useData = () => {
+      return useSWR<any, any>(
+        key,
+        () => createResponse(new Error('error!'), { delay: 200 }),
+        undefined
+      )
+    }
+    const Page = () => {
+      useData()
+      return null
+    }
+    const App = () => {
+      const { error, isLoading } = useData()
+      if (isLoading) return <span>loading</span>
+      return (
+        <div>
+          {error ? error.message : ''},{isLoading.toString()}
+          <Page />
+        </div>
+      )
+    }
+    renderWithConfig(<App />)
+    screen.getByText('loading')
+    await screen.findByText('error!,false')
+  })
+
+  it('should not should not trigger revalidation when a key is already active and has error - isValidating', async () => {
+    const key = createKey()
+    const useData = () => {
+      return useSWR<any, any>(
+        key,
+        () => createResponse(new Error('error!'), { delay: 200 }),
+        undefined
+      )
+    }
+    const Page = () => {
+      useData()
+      return null
+    }
+    const App = () => {
+      const { error, isValidating } = useData()
+      if (isValidating) return <span>validating</span>
+      return (
+        <div>
+          {error ? error.message : ''},{isValidating.toString()}
+          <Page />
+        </div>
+      )
+    }
+    renderWithConfig(<App />)
+    screen.getByText('validating')
+    await screen.findByText('error!,false')
+  })
 })

test/use-swr-loading.test.tsx

@@ -228,7 +228,8 @@ describe('useSWR - loading', () => {
           await sleep(50)
           throw new Error(key)
         },
-        dedupingInterval: 0
+        dedupingInterval: 0,
+        errorRetryInterval: 50
       })
 
       return isValidating ? <>validating</> : <>stopped</>
@@ -251,8 +252,7 @@ describe('useSWR - loading', () => {
     screen.getByText('stopped,')
 
     fireEvent.click(screen.getByText('start'))
-    await executeWithoutBatching(() => sleep(20))
-    screen.getByText('validating,validating')
+    await screen.findByText('validating,validating')
 
     // Pause before it resolves
     paused = true