Merge pull request #2367 from inertiajs/prefetch-header

Send `Purpose: prefetch` header on prefetching

Author: pascalbaljet

packages/core/src/prefetched.ts

@@ -1,3 +1,4 @@
+import { cloneDeep } from 'es-toolkit'
 import { objectsAreEqual } from './objectUtils'
 import { Response } from './response'
 import { timeToMs } from './time'
@@ -205,23 +206,35 @@ class PrefetchedRequests {
     )
   }
 
+  protected withoutPurposePrefetchHeader(params: ActiveVisit): ActiveVisit {
+    const newParams = cloneDeep(params)
+    if (newParams.headers['Purpose'] === 'prefetch') {
+      delete newParams.headers['Purpose']
+    }
+    return newParams
+  }
+
   protected paramsAreEqual(params1: ActiveVisit, params2: ActiveVisit): boolean {
-    return objectsAreEqual<ActiveVisit>(params1, params2, [
-      'showProgress',
-      'replace',
-      'prefetch',
-      'onBefore',
-      'onStart',
-      'onProgress',
-      'onFinish',
-      'onCancel',
-      'onSuccess',
-      'onError',
-      'onPrefetched',
-      'onCancelToken',
-      'onPrefetching',
-      'async',
-    ])
+    return objectsAreEqual<ActiveVisit>(
+      this.withoutPurposePrefetchHeader(params1),
+      this.withoutPurposePrefetchHeader(params2),
+      [
+        'showProgress',
+        'replace',
+        'prefetch',
+        'onBefore',
+        'onStart',
+        'onProgress',
+        'onFinish',
+        'onCancel',
+        'onSuccess',
+        'onError',
+        'onPrefetched',
+        'onCancelToken',
+        'onPrefetching',
+        'async',
+      ],
+    )
   }
 }
 

packages/core/src/router.ts

@@ -352,7 +352,7 @@ export class Router {
       mergedOptions.queryStringArrayFormat,
     )
 
-    return {
+    const visit = {
       cancelled: false,
       completed: false,
       interrupted: false,
@@ -361,6 +361,12 @@ export class Router {
       url,
       data: _data,
     }
+
+    if (visit.prefetch) {
+      visit.headers['Purpose'] = 'prefetch'
+    }
+
+    return visit
   }
 
   protected getVisitEvents(options: VisitOptions): VisitCallbacks {

tests/prefetch.spec.ts

@@ -26,8 +26,11 @@ test('will not prefetch current page', async ({ page }) => {
   await page.goto('prefetch/1')
 
   // These two prefetch requests should be made on mount
-  await prefetch2
-  await prefetch4
+  const request2 = await prefetch2
+  const request4 = await prefetch4
+
+  expect(request2.request().headers().purpose).toBe('prefetch')
+  expect(request4.request().headers().purpose).toBe('prefetch')
 
   requests.listen(page)
   await page.getByRole('link', { name: 'On Hover (Default)' }).hover()