Remove failed prefetch requests from in-flight array (#2500)

* wip

* wip

* wip

* TS

* Update prefetched.ts

Author: pascalbaljet

package.json

@@ -9,6 +9,7 @@
     "dev:test-app:react": "pnpx concurrently -c \"#fdba74,#34d399\" \"cd tests/app && PACKAGE=react pnpm serve:watch\" \"cd packages/react/test-app && pnpm run dev\" --names=server,vite",
     "dev:test-app:svelte": "pnpx concurrently -c \"#fdba74,#34d399\" \"cd tests/app && PACKAGE=svelte pnpm serve:watch\" \"cd packages/svelte/test-app && pnpm run dev\" --names=server,vite",
     "dev:test-app:vue": "pnpx concurrently -c \"#fdba74,#34d399\" \"cd tests/app && PACKAGE=vue3 pnpm serve:watch\" \"cd packages/vue3/test-app && pnpm run dev\" --names=server,vite",
+    "type-check:test-app": "pnpm -r --filter './packages/*/test-app' type-check",
     "type-check:test-app:react": "cd packages/react/test-app && pnpm run type-check",
     "type-check:test-app:svelte": "cd packages/svelte/test-app && pnpm run type-check",
     "type-check:test-app:vue": "cd packages/vue3/test-app && pnpm run type-check",

packages/core/src/prefetched.ts

@@ -55,6 +55,10 @@ class PrefetchedRequests {
         onPrefetchResponse(response) {
           resolve(response)
         },
+        onPrefetchError(error) {
+          prefetchedRequests.removeFromInFlight(params)
+          reject(error)
+        },
       })
     }).then((response) => {
       this.remove(params)
@@ -69,10 +73,7 @@ class PrefetchedRequests {
       })
 
       this.scheduleForRemoval(params, expires)
-
-      this.inFlightRequests = this.inFlightRequests.filter((prefetching) => {
-        return !this.paramsAreEqual(prefetching.params, params)
-      })
+      this.removeFromInFlight(params)
 
       response.handlePrefetch()
 
@@ -105,6 +106,12 @@ class PrefetchedRequests {
     this.clearTimer(params)
   }
 
+  protected removeFromInFlight(params: ActiveVisit): void {
+    this.inFlightRequests = this.inFlightRequests.filter((prefetching) => {
+      return !this.paramsAreEqual(prefetching.params, params)
+    })
+  }
+
   protected extractStaleValues(cacheFor: PrefetchOptions['cacheFor']): [number, number] {
     const [stale, expires] = this.cacheForToStaleAndExpires(cacheFor)
 

packages/core/src/request.ts

@@ -72,6 +72,10 @@ export class Request {
         }
 
         if (fireExceptionEvent(error)) {
+          if (originallyPrefetch) {
+            this.requestParams.onPrefetchError(error)
+          }
+
           return Promise.reject(error)
         }
       })

packages/core/src/requestParams.ts

@@ -32,6 +32,7 @@ export class RequestParams {
         ...params,
         ...wrappedCallbacks,
         onPrefetchResponse: params.onPrefetchResponse || (() => {}),
+        onPrefetchError: params.onPrefetchError || (() => {}),
       }
     }
     //
@@ -95,6 +96,12 @@ export class RequestParams {
     }
   }
 
+  public onPrefetchError(error: Error) {
+    if (this.params.onPrefetchError) {
+      this.params.onPrefetchError(error)
+    }
+  }
+
   public all() {
     return this.params
   }

packages/core/src/types.ts

@@ -336,6 +336,7 @@ export type ActiveVisit<T extends RequestPayload = RequestPayload> = PendingVisi
 
 export type InternalActiveVisit = ActiveVisit & {
   onPrefetchResponse?: (response: Response) => void
+  onPrefetchError?: (error: Error) => void
 }
 
 export type VisitId = unknown

packages/react/test-app/Pages/Prefetch/AfterError.tsx

@@ -0,0 +1,18 @@
+import { router } from '@inertiajs/react'
+
+export default function AfterError() {
+  const prefetchPage = () => {
+    router.prefetch('/prefetch/swr/1', { method: 'get' }, { cacheFor: 5000 })
+  }
+
+  const visitPage = () => {
+    router.visit('/prefetch/swr/1')
+  }
+
+  return (
+    <div>
+      <button onClick={prefetchPage}>Prefetch Page</button>
+      <button onClick={visitPage}>Visit Page</button>
+    </div>
+  )
+}

packages/svelte/test-app/Pages/Prefetch/AfterError.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { router } from '@inertiajs/svelte'
+
+const prefetchPage = () => {
+  router.prefetch('/prefetch/swr/1', { method: 'get' }, { cacheFor: 5000 })
+}
+
+const visitPage = () => {
+  router.visit('/prefetch/swr/1')
+}
+</script>
+
+<div>
+  <button on:click={prefetchPage}>Prefetch Page</button>
+  <button on:click={visitPage}>Visit Page</button>
+</div>

packages/vue3/test-app/Pages/Prefetch/AfterError.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3'
+
+const prefetchPage = () => {
+  router.prefetch('/prefetch/swr/1', { method: 'get' }, { cacheFor: 5000 })
+}
+
+const visitPage = () => {
+  router.visit('/prefetch/swr/1')
+}
+</script>
+
+<template>
+  <div>
+    <button @click="prefetchPage">Prefetch Page</button>
+    <button @click="visitPage">Visit Page</button>
+  </div>
+</template>

tests/app/server.js

@@ -235,6 +235,10 @@ app.get('/poll/hook', (req, res) => inertia.render(req, res, { component: 'Poll/
 app.get('/poll/hook/manual', (req, res) => inertia.render(req, res, { component: 'Poll/HookManual', props: {} }))
 app.get('/poll/router/manual', (req, res) => inertia.render(req, res, { component: 'Poll/RouterManual', props: {} }))
 
+app.get('/prefetch/after-error', (req, res) => {
+  inertia.render(req, res, { component: 'Prefetch/AfterError' })
+})
+
 app.get('/prefetch/:pageNumber', (req, res) => {
   inertia.render(req, res, {
     component: 'Prefetch/Page',

tests/prefetch.spec.ts

@@ -158,6 +158,20 @@ test('can cache links with single cache value', async ({ page }) => {
   await expect(lastLoaded2).not.toBe(lastLoaded2Fresh)
 })
 
+test('can visit the page when prefetching has failed due to network error', async ({ page, browser }) => {
+  await page.goto('prefetch/after-error')
+
+  page.context().setOffline(true)
+  await page.getByRole('button', { name: 'Prefetch Page' }).click()
+
+  page.context().setOffline(false)
+
+  requests.listen(page)
+  await page.getByRole('button', { name: 'Visit Page' }).click()
+
+  await isPrefetchSwrPage(page, 1)
+})
+
 test.skip('can do SWR when the link cacheFor prop has two values', async ({ page }) => {
   await page.goto('prefetch/swr/1')