fix: follow server fn redirects when submitting formdata (#4519)

Co-authored-by: Manuel Schiller <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

e2e/react-start/server-functions/src/routeTree.gen.ts

@@ -22,8 +22,10 @@ import { Route as DeadCodePreserveRouteImport } from './routes/dead-code-preserv
 import { Route as ConsistentRouteImport } from './routes/consistent'
 import { Route as AbortSignalRouteImport } from './routes/abort-signal'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as FormdataRedirectIndexRouteImport } from './routes/formdata-redirect/index'
 import { Route as CookiesIndexRouteImport } from './routes/cookies/index'
 import { Route as CookiesSetRouteImport } from './routes/cookies/set'
+import { Route as FormdataRedirectTargetNameRouteImport } from './routes/formdata-redirect/target.$name'
 
 const SubmitPostFormdataRoute = SubmitPostFormdataRouteImport.update({
   id: '/submit-post-formdata',
@@ -90,6 +92,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const FormdataRedirectIndexRoute = FormdataRedirectIndexRouteImport.update({
+  id: '/formdata-redirect/',
+  path: '/formdata-redirect/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const CookiesIndexRoute = CookiesIndexRouteImport.update({
   id: '/cookies/',
   path: '/cookies/',
@@ -100,6 +107,12 @@ const CookiesSetRoute = CookiesSetRouteImport.update({
   path: '/cookies/set',
   getParentRoute: () => rootRouteImport,
 } as any)
+const FormdataRedirectTargetNameRoute =
+  FormdataRedirectTargetNameRouteImport.update({
+    id: '/formdata-redirect/target/$name',
+    path: '/formdata-redirect/target/$name',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -117,6 +130,8 @@ export interface FileRoutesByFullPath {
   '/submit-post-formdata': typeof SubmitPostFormdataRoute
   '/cookies/set': typeof CookiesSetRoute
   '/cookies': typeof CookiesIndexRoute
+  '/formdata-redirect': typeof FormdataRedirectIndexRoute
+  '/formdata-redirect/target/$name': typeof FormdataRedirectTargetNameRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -134,6 +149,8 @@ export interface FileRoutesByTo {
   '/submit-post-formdata': typeof SubmitPostFormdataRoute
   '/cookies/set': typeof CookiesSetRoute
   '/cookies': typeof CookiesIndexRoute
+  '/formdata-redirect': typeof FormdataRedirectIndexRoute
+  '/formdata-redirect/target/$name': typeof FormdataRedirectTargetNameRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -152,6 +169,8 @@ export interface FileRoutesById {
   '/submit-post-formdata': typeof SubmitPostFormdataRoute
   '/cookies/set': typeof CookiesSetRoute
   '/cookies/': typeof CookiesIndexRoute
+  '/formdata-redirect/': typeof FormdataRedirectIndexRoute
+  '/formdata-redirect/target/$name': typeof FormdataRedirectTargetNameRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -171,6 +190,8 @@ export interface FileRouteTypes {
     | '/submit-post-formdata'
     | '/cookies/set'
     | '/cookies'
+    | '/formdata-redirect'
+    | '/formdata-redirect/target/$name'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -188,6 +209,8 @@ export interface FileRouteTypes {
     | '/submit-post-formdata'
     | '/cookies/set'
     | '/cookies'
+    | '/formdata-redirect'
+    | '/formdata-redirect/target/$name'
   id:
     | '__root__'
     | '/'
@@ -205,6 +228,8 @@ export interface FileRouteTypes {
     | '/submit-post-formdata'
     | '/cookies/set'
     | '/cookies/'
+    | '/formdata-redirect/'
+    | '/formdata-redirect/target/$name'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -223,6 +248,8 @@ export interface RootRouteChildren {
   SubmitPostFormdataRoute: typeof SubmitPostFormdataRoute
   CookiesSetRoute: typeof CookiesSetRoute
   CookiesIndexRoute: typeof CookiesIndexRoute
+  FormdataRedirectIndexRoute: typeof FormdataRedirectIndexRoute
+  FormdataRedirectTargetNameRoute: typeof FormdataRedirectTargetNameRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -318,6 +345,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/formdata-redirect/': {
+      id: '/formdata-redirect/'
+      path: '/formdata-redirect'
+      fullPath: '/formdata-redirect'
+      preLoaderRoute: typeof FormdataRedirectIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/cookies/': {
       id: '/cookies/'
       path: '/cookies'
@@ -332,6 +366,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CookiesSetRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/formdata-redirect/target/$name': {
+      id: '/formdata-redirect/target/$name'
+      path: '/formdata-redirect/target/$name'
+      fullPath: '/formdata-redirect/target/$name'
+      preLoaderRoute: typeof FormdataRedirectTargetNameRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
@@ -351,6 +392,8 @@ const rootRouteChildren: RootRouteChildren = {
   SubmitPostFormdataRoute: SubmitPostFormdataRoute,
   CookiesSetRoute: CookiesSetRoute,
   CookiesIndexRoute: CookiesIndexRoute,
+  FormdataRedirectIndexRoute: FormdataRedirectIndexRoute,
+  FormdataRedirectTargetNameRoute: FormdataRedirectTargetNameRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

e2e/react-start/server-functions/src/routes/formdata-redirect/index.tsx

@@ -0,0 +1,74 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createServerFn, useServerFn } from '@tanstack/react-start'
+import { z } from 'zod'
+
+export const Route = createFileRoute('/formdata-redirect/')({
+  component: SubmitPostFormDataFn,
+  validateSearch: z.object({
+    mode: z.union([z.literal('js'), z.literal('no-js')]).default('js'),
+  }),
+})
+
+const testValues = {
+  name: 'Sean',
+}
+
+export const greetUser = createServerFn({ method: 'POST' })
+  .validator((data: FormData) => {
+    if (!(data instanceof FormData)) {
+      throw new Error('Invalid! FormData is required')
+    }
+    const name = data.get('name')
+
+    if (!name) {
+      throw new Error('Name is required')
+    }
+
+    return {
+      name: name.toString(),
+    }
+  })
+  .handler(({ data: { name } }) => {
+    throw redirect({ to: '/formdata-redirect/target/$name', params: { name } })
+  })
+
+function SubmitPostFormDataFn() {
+  const mode = Route.useSearch({ select: (search) => search.mode })
+  const greetUserFn = useServerFn(greetUser)
+  return (
+    <div className="p-2 m-2 grid gap-2">
+      <h3>Submit POST FormData Fn Call</h3>
+      <div className="overflow-y-auto">
+        It should return redirect to /formdata-redirect/target/{testValues.name}{' '}
+        and greet the user with their name:
+        <code>
+          <pre data-testid="expected-submit-post-formdata-server-fn-result">
+            {testValues.name}
+          </pre>
+        </code>
+      </div>
+      <form
+        className="flex flex-col gap-2"
+        data-testid="submit-post-formdata-form"
+        method="POST"
+        action={greetUser.url}
+        onSubmit={async (evt) => {
+          if (mode === 'js') {
+            evt.preventDefault()
+            const data = new FormData(evt.currentTarget)
+            await greetUserFn({ data })
+          }
+        }}
+      >
+        <input type="text" name="name" defaultValue={testValues.name} />
+        <button
+          type="submit"
+          data-testid="test-submit-post-formdata-fn-calls-btn"
+          className="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  )
+}

e2e/react-start/server-functions/src/routes/formdata-redirect/target.$name.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/formdata-redirect/target/$name')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="formdata-redirect-target">
+      Hello{' '}
+      <span data-testid="formdata-redirect-target-name">
+        {Route.useParams().name}
+      </span>
+      !
+    </div>
+  )
+}

e2e/react-start/server-functions/src/routes/index.tsx

@@ -72,6 +72,16 @@ function Home() {
         <li>
           <Link to="/raw-response">server function returns raw response</Link>
         </li>
+        <li>
+          <Link to="/formdata-redirect" search={{ mode: 'js' }}>
+            server function redirects when FormData is submitted (via JS)
+          </Link>
+        </li>
+        <li>
+          <Link to="/formdata-redirect" search={{ mode: 'no-js' }}>
+            server function redirects when FormData is submitted (via no-JS)
+          </Link>
+        </li>
       </ul>
     </div>
   )

e2e/react-start/server-functions/tests/server-functions.spec.ts

@@ -315,3 +315,27 @@ test('raw response', async ({ page }) => {
 
   await expect(page.getByTestId('response')).toContainText(expectedValue)
 })
+;[{ mode: 'js' }, { mode: 'no-js' }].forEach(({ mode }) => {
+  test(`Server function can redirect when sending formdata: mode = ${mode}`, async ({
+    page,
+  }) => {
+    await page.goto('/formdata-redirect?mode=' + mode)
+
+    await page.waitForLoadState('networkidle')
+    const expected =
+      (await page
+        .getByTestId('expected-submit-post-formdata-server-fn-result')
+        .textContent()) || ''
+    expect(expected).not.toBe('')
+
+    await page.getByTestId('test-submit-post-formdata-fn-calls-btn').click()
+
+    await page.waitForLoadState('networkidle')
+
+    await expect(
+      page.getByTestId('formdata-redirect-target-name'),
+    ).toContainText(expected)
+
+    expect(page.url().endsWith(`/formdata-redirect/target/${expected}`))
+  })
+})

packages/start-server-functions-fetcher/src/index.ts

@@ -25,11 +25,11 @@ export async function serverFnFetcher(
 
     // Arrange the headers
     const headers = new Headers({
+      'x-tsr-redirect': 'manual',
       ...(type === 'payload'
         ? {
             'content-type': 'application/json',
             accept: 'application/json',
-            'x-tsr-redirect': 'manual',
           }
         : {}),
       ...(first.headers instanceof Headers