fix: cancel in-flight deferred prop requests on navigation

When users rapidly navigate between pages with deferred props, multiple
requests fire in quick succession. Previously, deferred prop requests
from previous navigations were not cancelled, causing them to complete
out-of-order and display stale data.

This change cancels all in-flight async (deferred) requests when
starting a new main visit, while preserving concurrent loading of
deferred props within the same page load.

Changes:
- Fix RequestStream.cancelInFlight() to cancel ALL requests (not just first)
- Add cancellation logic in Router.visit() after onBefore check
- Add detection to distinguish deferred requests from main navigation
- Add comprehensive test suite for cancellation behavior

The cancellation happens after onBefore checks to avoid cancelling
deferred props when navigation is prevented by user confirmation dialogs.

Author: alexspeller

packages/core/src/requestStream.ts

@@ -25,7 +25,13 @@ export class RequestStream {
   }
 
   public cancelInFlight(): void {
-    this.cancel({ cancelled: true }, true)
+    // Cancel ALL in-flight requests (used for async stream with unlimited concurrency)
+    // Note: We don't clear this.requests = [] because cancelled requests will remove
+    // themselves via the filter in send() when their promise resolves
+    const requestsToCancel = [...this.requests]
+    requestsToCancel.forEach((request) => {
+      request.cancel({ cancelled: true })
+    })
   }
 
   protected cancel({ cancelled = false, interrupted = false } = {}, force: boolean): void {

packages/core/src/router.ts

@@ -181,6 +181,15 @@ export class Router {
       return
     }
 
+    // Cancel in-flight async (deferred) requests when starting a new main visit
+    // This prevents stale deferred prop data from appearing after rapid navigation
+    const isDeferredRequest =
+      visit.only && Array.isArray(visit.only) && visit.only.length > 0 && visit.except.length === 0
+
+    if (!isDeferredRequest) {
+      this.asyncRequestStream.cancelInFlight()
+    }
+
     const requestStream = visit.async ? this.asyncRequestStream : this.syncRequestStream
 
     requestStream.interruptInFlight()

packages/react/test-app/Pages/DeferredProps/RapidNavigation.tsx

@@ -0,0 +1,54 @@
+import { Deferred, Link, router, usePage } from '@inertiajs/react'
+
+const Users = () => {
+  const { users } = usePage<{ users?: { text: string } }>().props
+  return <div>{users?.text}</div>
+}
+
+const Stats = () => {
+  const { stats } = usePage<{ stats?: { text: string } }>().props
+  return <div>{stats?.text}</div>
+}
+
+const Activity = () => {
+  const { activity } = usePage<{ activity?: { text: string } }>().props
+  return <div>{activity?.text}</div>
+}
+
+export default () => {
+  const { filter } = usePage<{ filter: string }>().props
+
+  return (
+    <>
+      <div>Current filter: {filter}</div>
+
+      <Deferred data="users" fallback={<div>Loading users...</div>}>
+        <Users />
+      </Deferred>
+
+      <Deferred data="stats" fallback={<div>Loading stats...</div>}>
+        <Stats />
+      </Deferred>
+
+      <Deferred data="activity" fallback={<div>Loading activity...</div>}>
+        <Activity />
+      </Deferred>
+
+      <Link href="/deferred-props/rapid-navigation/a">Filter A</Link>
+      <Link href="/deferred-props/rapid-navigation/b">Filter B</Link>
+      <Link href="/deferred-props/rapid-navigation/c">Filter C</Link>
+      <Link href="/deferred-props/page-1">Navigate Away</Link>
+
+      <button
+        onClick={() => {
+          const shouldNavigate = confirm('Navigate away?')
+          if (shouldNavigate) {
+            router.visit('/deferred-props/page-2')
+          }
+        }}
+      >
+        Navigate with onBefore
+      </button>
+    </>
+  )
+}

packages/svelte/test-app/Pages/DeferredProps/RapidNavigation.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Deferred, Link, router, page } from '@inertiajs/svelte'
+
+  $: filter = $page.props.filter as string
+  $: users = $page.props.users as { text: string } | undefined
+  $: stats = $page.props.stats as { text: string } | undefined
+  $: activity = $page.props.activity as { text: string } | undefined
+
+  function handleOnBeforeClick() {
+    const shouldNavigate = confirm('Navigate away?')
+    if (shouldNavigate) {
+      router.visit('/deferred-props/page-2')
+    }
+  }
+</script>
+
+<div>Current filter: {filter}</div>
+
+<Deferred data="users">
+  <div slot="fallback">Loading users...</div>
+  <div>{users?.text}</div>
+</Deferred>
+
+<Deferred data="stats">
+  <div slot="fallback">Loading stats...</div>
+  <div>{stats?.text}</div>
+</Deferred>
+
+<Deferred data="activity">
+  <div slot="fallback">Loading activity...</div>
+  <div>{activity?.text}</div>
+</Deferred>
+
+<Link href="/deferred-props/rapid-navigation/a">Filter A</Link>
+<Link href="/deferred-props/rapid-navigation/b">Filter B</Link>
+<Link href="/deferred-props/rapid-navigation/c">Filter C</Link>
+<Link href="/deferred-props/page-1">Navigate Away</Link>
+
+<button on:click={handleOnBeforeClick}>Navigate with onBefore</button>

packages/vue3/test-app/Pages/DeferredProps/RapidNavigation.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Deferred, Link, router } from '@inertiajs/vue3'
+
+defineProps<{
+  filter: string
+  users?: { text: string }
+  stats?: { text: string }
+  activity?: { text: string }
+}>()
+
+const handleOnBeforeClick = () => {
+  const shouldNavigate = confirm('Navigate away?')
+  if (shouldNavigate) {
+    router.visit('/deferred-props/page-2')
+  }
+}
+</script>
+
+<template>
+  <div>Current filter: {{ filter }}</div>
+
+  <Deferred data="users">
+    <div>{{ users?.text }}</div>
+    <template #fallback>
+      <div>Loading users...</div>
+    </template>
+  </Deferred>
+
+  <Deferred data="stats">
+    <div>{{ stats?.text }}</div>
+    <template #fallback>
+      <div>Loading stats...</div>
+    </template>
+  </Deferred>
+
+  <Deferred data="activity">
+    <div>{{ activity?.text }}</div>
+    <template #fallback>
+      <div>Loading activity...</div>
+    </template>
+  </Deferred>
+
+  <Link href="/deferred-props/rapid-navigation/a">Filter A</Link>
+  <Link href="/deferred-props/rapid-navigation/b">Filter B</Link>
+  <Link href="/deferred-props/rapid-navigation/c">Filter C</Link>
+  <Link href="/deferred-props/page-1">Navigate Away</Link>
+
+  <button @click="handleOnBeforeClick">Navigate with onBefore</button>
+</template>

tests/app/server.js

@@ -733,6 +733,40 @@ app.get('/deferred-props/instant-reload', (req, res) => {
   )
 })
 
+app.get('/deferred-props/rapid-navigation/:filter?', (req, res) => {
+  const filter = req.params.filter || 'none'
+  const requestedProps = req.headers['x-inertia-partial-data']
+
+  if (!requestedProps) {
+    return inertia.render(req, res, {
+      component: 'DeferredProps/RapidNavigation',
+      deferredProps: {
+        group1: ['users'],
+        group2: ['stats'],
+        group3: ['activity'],
+      },
+      props: {
+        filter,
+      },
+    })
+  }
+
+  // Simulate slow deferred prop loading (600ms)
+  setTimeout(
+    () =>
+      inertia.render(req, res, {
+        component: 'DeferredProps/RapidNavigation',
+        props: {
+          filter,
+          users: requestedProps.includes('users') ? { text: `users data for ${filter}` } : undefined,
+          stats: requestedProps.includes('stats') ? { text: `stats data for ${filter}` } : undefined,
+          activity: requestedProps.includes('activity') ? { text: `activity data for ${filter}` } : undefined,
+        },
+      }),
+    600,
+  )
+})
+
 app.get('/svelte/props-and-page-store', (req, res) =>
   inertia.render(req, res, { component: 'Svelte/PropsAndPageStore', props: { foo: req.query.foo || 'default' } }),
 )