fix: don't drop queued actions when navigating (#75362)

lubieowoce · web-flow · commit dc52e7ece357 · 2025-03-06T00:02:40.000Z
If we run two or more actions, the first starts executing immediately,
and the rest gets queued. The bug here was that if we navigated right
after, the navigation would make us drop the rest of the queue, which
would cause all the queued action calls to never resolve.
diff --git a/packages/next/src/shared/lib/router/action-queue.ts b/packages/next/src/shared/lib/router/action-queue.ts
@@ -151,8 +151,9 @@ function dispatchAction(
     // Mark the pending action as discarded (so the state is never applied) and start the navigation action immediately.
     actionQueue.pending.discarded = true
 
-    // Mark this action as the last in the queue
-    actionQueue.last = newAction
+    // The rest of the current queue should still execute after this navigation.
+    // (Note that it can't contain any earlier navigations, because we always put those into `actionQueue.pending` by calling `runAction`)
+    newAction.next = actionQueue.pending.next
 
     // if the pending action was a server action, mark the queue as needing a refresh once events are processed
     if (actionQueue.pending.payload.type === ACTION_SERVER_ACTION) {
diff --git a/test/e2e/app-dir/navigation-with-queued-actions/app/layout.tsx b/test/e2e/app-dir/navigation-with-queued-actions/app/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/navigation-with-queued-actions/app/page.tsx b/test/e2e/app-dir/navigation-with-queued-actions/app/page.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { myAction } from './server'
+
+export default function Page() {
+  const router = useRouter()
+  const [text, setText] = useState('initial')
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => {
+          Promise.all([myAction(0), myAction(1)]).then(() => setText('done'))
+          setTimeout(() => {
+            router.replace('?')
+          })
+        }}
+      >
+        run actions
+      </button>
+      <div id="action-state">{text}</div>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/navigation-with-queued-actions/app/server.ts b/test/e2e/app-dir/navigation-with-queued-actions/app/server.ts
@@ -0,0 +1,8 @@
+'use server'
+
+import { setTimeout } from 'timers/promises'
+
+export async function myAction(id: number) {
+  console.log(`myAction(${id}) :: server`)
+  await setTimeout(100)
+}
diff --git a/test/e2e/app-dir/navigation-with-queued-actions/index.test.ts b/test/e2e/app-dir/navigation-with-queued-actions/index.test.ts
@@ -0,0 +1,18 @@
+import { nextTestSetup } from '../../../lib/e2e-utils'
+import { retry } from '../../../lib/next-test-utils'
+
+describe('actions', () => {
+  const { next } = nextTestSetup({ files: __dirname })
+  it('works', async () => {
+    const browser = await next.browser('/')
+    await browser.elementByCss('button').click()
+    await retry(
+      async () => {
+        expect(await browser.elementById('action-state').text()).toEqual('done')
+      },
+      undefined,
+      undefined,
+      'wait for both actions to finish'
+    )
+  })
+})
diff --git a/test/e2e/app-dir/navigation-with-queued-actions/next.config.mjs b/test/e2e/app-dir/navigation-with-queued-actions/next.config.mjs
@@ -0,0 +1 @@
+export default {}
